

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=dark>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/memory_blog/img/fluid.png">
  <link rel="icon" href="/memory_blog/img/icon/dw.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Memory">
  <meta name="keywords" content="">
  
    <meta name="description" content="🌮 记录在前端框架使用中的探索过程，享在前端框架使用中遇到的问题以及如何找到解决方案的经验和技巧。">
<meta property="og:type" content="article">
<meta property="og:title" content="浴火重生：从挫败到成功，前端框架的疑难杂症解决之道">
<meta property="og:url" content="https://test.atomgit.net/memory_blog/2023/07/21/%E6%B5%B4%E7%81%AB%E9%87%8D%E7%94%9F%EF%BC%9A%E4%BB%8E%E6%8C%AB%E8%B4%A5%E5%88%B0%E6%88%90%E5%8A%9F%EF%BC%8C%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E7%9A%84%E7%96%91%E9%9A%BE%E6%9D%82%E7%97%87%E8%A7%A3%E5%86%B3%E4%B9%8B%E9%81%93/index.html">
<meta property="og:site_name" content="Memory&#39;s blog">
<meta property="og:description" content="🌮 记录在前端框架使用中的探索过程，享在前端框架使用中遇到的问题以及如何找到解决方案的经验和技巧。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://test.atomgit.net/memory_blog/img/artical/sky4.jpg">
<meta property="article:published_time" content="2023-07-21T06:12:12.000Z">
<meta property="article:modified_time" content="2024-01-16T13:12:34.000Z">
<meta property="article:author" content="Memory">
<meta property="article:tag" content="经验">
<meta property="article:tag" content="项目">
<meta property="article:tag" content="Ant Design Pro">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="React">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://test.atomgit.net/memory_blog/img/artical/sky4.jpg">
  
  
  
  <title>浴火重生：从挫败到成功，前端框架的疑难杂症解决之道 - Memory&#39;s blog</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/memory_blog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/memory_blog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/memory_blog/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"test.atomgit.net","root":"/memory_blog/","version":"1.9.4","typing":{"enable":true,"typeSpeed":100,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/memory_blog/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/memory_blog/js/utils.js" ></script>
  <script  src="/memory_blog/js/color-schema.js" ></script>
  

  

  

  

  

  

  

  



  
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 75vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/memory_blog/">
      <strong>Memory&#39;s blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/memory_blog/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/memory_blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/memory_blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/memory_blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/memory_blog/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/memory_blog/links/">
                <i class="iconfont icon-link-fill"></i>
                <span>友链</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/memory_blog/img/newBG/girl.jpg') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="浴火重生：从挫败到成功，前端框架的疑难杂症解决之道"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        Memory
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-07-21 14:12" pubdate>
          2023年7月21日 下午
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          35k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          87 分钟
        
      </span>
    

    
    
      
        <span id="leancloud-page-views-container" class="post-meta" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="leancloud-page-views"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar category-bar" style="margin-right: -1rem">
    





<div class="category-list">
  
  
    
    
    
    <div class="category row nomargin-x">
      <a class="category-item 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="Ant Design Pro"
        id="heading-356f12ebf646a1d51c70ffcd36042d68" role="tab" data-toggle="collapse" href="#collapse-356f12ebf646a1d51c70ffcd36042d68"
        aria-expanded="true"
      >
        Ant Design Pro
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-356f12ebf646a1d51c70ffcd36042d68"
           role="tabpanel" aria-labelledby="heading-356f12ebf646a1d51c70ffcd36042d68">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="Vue"
        id="heading-2d8ec58babcec05d3fe8f712968de749" role="tab" data-toggle="collapse" href="#collapse-2d8ec58babcec05d3fe8f712968de749"
        aria-expanded="true"
      >
        Vue
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-2d8ec58babcec05d3fe8f712968de749"
           role="tabpanel" aria-labelledby="heading-2d8ec58babcec05d3fe8f712968de749">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="React"
        id="heading-50ce2da63bea6a618e7578fa50690040" role="tab" data-toggle="collapse" href="#collapse-50ce2da63bea6a618e7578fa50690040"
        aria-expanded="true"
      >
        React
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-50ce2da63bea6a618e7578fa50690040"
           role="tabpanel" aria-labelledby="heading-50ce2da63bea6a618e7578fa50690040">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="项目"
        id="heading-31ecc0e65b4cd3e6b12577382bb56d6a" role="tab" data-toggle="collapse" href="#collapse-31ecc0e65b4cd3e6b12577382bb56d6a"
        aria-expanded="true"
      >
        项目
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-31ecc0e65b4cd3e6b12577382bb56d6a"
           role="tabpanel" aria-labelledby="heading-31ecc0e65b4cd3e6b12577382bb56d6a">
        
        
          
          
  <div class="category-post-list">
    
    
  </div>

          
  
    
    
    
    <div class="category-sub row nomargin-x">
      <a class="category-subitem 
          list-group-item category-item-action col-10 col-md-11 col-xm-11" title="经验"
        id="heading-32a8e000e928e6dc255876d9fc0178b3" role="tab" data-toggle="collapse" href="#collapse-32a8e000e928e6dc255876d9fc0178b3"
        aria-expanded="true"
      >
        经验
        <span class="list-group-count">(1)</span>
        <i class="iconfont icon-arrowright"></i>
      </a>
      
      <div class="category-collapse collapse show" id="collapse-32a8e000e928e6dc255876d9fc0178b3"
           role="tabpanel" aria-labelledby="heading-32a8e000e928e6dc255876d9fc0178b3">
        
        
          
  <div class="category-post-list">
    
    
      
      
        <a href="/memory_blog/2023/07/21/%E6%B5%B4%E7%81%AB%E9%87%8D%E7%94%9F%EF%BC%9A%E4%BB%8E%E6%8C%AB%E8%B4%A5%E5%88%B0%E6%88%90%E5%8A%9F%EF%BC%8C%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E7%9A%84%E7%96%91%E9%9A%BE%E6%9D%82%E7%97%87%E8%A7%A3%E5%86%B3%E4%B9%8B%E9%81%93/" title="浴火重生：从挫败到成功，前端框架的疑难杂症解决之道"
           class="list-group-item list-group-item-action
           active">
          <span class="category-post">浴火重生：从挫败到成功，前端框架的疑难杂症解决之道</span>
        </a>
      
    
  </div>

        
      </div>
    </div>
  
        
      </div>
    </div>
  
        
      </div>
    </div>
  
        
      </div>
    </div>
  
        
      </div>
    </div>
  
</div>


  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">浴火重生：从挫败到成功，前端框架的疑难杂症解决之道</h1>
            
              <p class="note note-success">
                
                  
                    本文最后更新于：6 个月前
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><h2 id="Ant-Design-Pro"><a href="#Ant-Design-Pro" class="headerlink" title="Ant Design Pro"></a>Ant Design Pro</h2><ul>
<li><h5 id="什么是Ant-Design-Pro？按我的理解，这是一个前端框架，却又不仅仅是一个前端框架"><a href="#什么是Ant-Design-Pro？按我的理解，这是一个前端框架，却又不仅仅是一个前端框架" class="headerlink" title="什么是Ant Design Pro？按我的理解，这是一个前端框架，却又不仅仅是一个前端框架"></a>什么是Ant Design Pro？按我的理解，这是一个前端框架，却又不仅仅是一个前端框架</h5></li>
<li><h5 id="Ant-Design-Pro的语言是React，它基于Ant-Design设计体系，提供了丰富的页面模板、组件和功能，非常适合快速搭建前台页面"><a href="#Ant-Design-Pro的语言是React，它基于Ant-Design设计体系，提供了丰富的页面模板、组件和功能，非常适合快速搭建前台页面" class="headerlink" title="Ant Design Pro的语言是React，它基于Ant Design设计体系，提供了丰富的页面模板、组件和功能，非常适合快速搭建前台页面"></a>Ant Design Pro的语言是React，它基于Ant Design设计体系，提供了丰富的页面模板、组件和功能，非常适合快速搭建前台页面</h5></li>
<li><h5 id="Ant-Design-组件库：分页-Pagination-Ant-Design"><a href="#Ant-Design-组件库：分页-Pagination-Ant-Design" class="headerlink" title="Ant Design 组件库：分页 Pagination - Ant Design"></a>Ant Design 组件库：<a target="_blank" rel="noopener" href="https://ant.design/components/pagination-cn">分页 Pagination - Ant Design</a></h5></li>
<li><h5 id="Ant-Design-Pro-脚手架：文档总览-Ant-Design-Pro"><a href="#Ant-Design-Pro-脚手架：文档总览-Ant-Design-Pro" class="headerlink" title="Ant Design Pro 脚手架：文档总览 - Ant Design Pro"></a>Ant Design Pro 脚手架：<a target="_blank" rel="noopener" href="https://pro.ant.design/zh-CN/docs/overview/">文档总览 - Ant Design Pro</a></h5></li>
<li><h5 id="下面是比较官方的定义："><a href="#下面是比较官方的定义：" class="headerlink" title="下面是比较官方的定义："></a>下面是比较官方的定义：</h5></li>
</ul>
<figure class="highlight gauss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs gauss">Ant <span class="hljs-built_in">Design</span> Pro 是一个开箱即用的企业级中后台前端/设计解决方案，基于 Ant <span class="hljs-built_in">Design</span> 设计体系，内置了丰富的页面模板、组件和功能，旨在帮助开发者快速搭建企业级中后台应用。<br></code></pre></td></tr></table></figure>

<figure class="highlight gauss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs gauss">Ant <span class="hljs-built_in">Design</span> Pro 提供了完整的前端开发工作流和最佳实践，具有以下特点和优势：<br>	<span class="hljs-number">1.</span>高度定制化：Ant <span class="hljs-built_in">Design</span> Pro 提供了可灵活配置的模板，可以根据项目需求自定义布局和功能，非常适合快速定制企业级应用。<br>	<span class="hljs-number">2.</span>丰富的模板和组件：Ant <span class="hljs-built_in">Design</span> Pro 内置了多个精心设计的页面模板和丰富的 UI 组件，包括表单、表格、图表、地图等，使开发者可		 以快速构建复杂的中后台应用。<br>	<span class="hljs-number">3.</span>系统化的工作流程：Ant <span class="hljs-built_in">Design</span> Pro 提供了完善的开发工作流程，包括开发环境、测试环境和生产环境的配置、代码检查、测试和构建	   等，使开发者能够便捷地进行前端开发。<br>	<span class="hljs-number">4.</span>功能丰富的插件集成：Ant <span class="hljs-built_in">Design</span> Pro 集成了常用的中后台应用所需的功能，包括菜单权限管理、数据请求、国际化、登录认证等，可       以快速构建完整的、稳定的企业级应用。<br></code></pre></td></tr></table></figure>

<h2 id="Ant-Design-Vue"><a href="#Ant-Design-Vue" class="headerlink" title="Ant Design Vue"></a>Ant Design Vue</h2><ul>
<li>官网：<a target="_blank" rel="noopener" href="https://www.antdv.com/docs/vue/getting-started-cn">快速上手 - Ant Design Vue (antdv.com)</a></li>
</ul>
<h2 id="Vite"><a href="#Vite" class="headerlink" title="Vite"></a>Vite</h2><ul>
<li>官网：<a target="_blank" rel="noopener" href="https://vitejs.cn/guide/why.html">为什么选 Vite | Vite中文网 (vitejs.cn)</a></li>
</ul>
<h2 id="写作目标"><a href="#写作目标" class="headerlink" title="写作目标"></a>写作目标</h2><ul>
<li><h5 id="脚手架的搭建固然简单，在脚手架的基础上，我们可以更方便地改造代码、对接后端代码、编写我们自己的业务逻辑"><a href="#脚手架的搭建固然简单，在脚手架的基础上，我们可以更方便地改造代码、对接后端代码、编写我们自己的业务逻辑" class="headerlink" title="脚手架的搭建固然简单，在脚手架的基础上，我们可以更方便地改造代码、对接后端代码、编写我们自己的业务逻辑"></a>脚手架的搭建固然简单，在脚手架的基础上，我们可以更方便地改造代码、对接后端代码、编写我们自己的业务逻辑</h5></li>
<li><h5 id="但前提是我们要理清框架的目录结构，以及相关的逻辑代码"><a href="#但前提是我们要理清框架的目录结构，以及相关的逻辑代码" class="headerlink" title="但前提是我们要理清框架的目录结构，以及相关的逻辑代码"></a>但前提是我们要理清框架的目录结构，以及相关的逻辑代码</h5></li>
<li><h5 id="Ant-Design-Pro内置了独特的登录页面、欢迎页面、表格页面，我们要理清登录校验逻辑、发送请求到自己的后端接口、重定向到login页的逻辑、管理员校验、页面路由配置等等，这些都是必须熟练掌握的"><a href="#Ant-Design-Pro内置了独特的登录页面、欢迎页面、表格页面，我们要理清登录校验逻辑、发送请求到自己的后端接口、重定向到login页的逻辑、管理员校验、页面路由配置等等，这些都是必须熟练掌握的" class="headerlink" title="Ant Design Pro内置了独特的登录页面、欢迎页面、表格页面，我们要理清登录校验逻辑、发送请求到自己的后端接口、重定向到login页的逻辑、管理员校验、页面路由配置等等，这些都是必须熟练掌握的"></a>Ant Design Pro内置了独特的登录页面、欢迎页面、表格页面，我们要理清登录校验逻辑、发送请求到自己的后端接口、重定向到login页的逻辑、管理员校验、页面路由配置等等，这些都是必须熟练掌握的</h5></li>
<li><h5 id="参考官网：启动项目-Ant-Design-Pro"><a href="#参考官网：启动项目-Ant-Design-Pro" class="headerlink" title="参考官网：启动项目 - Ant Design Pro"></a>参考官网：<a target="_blank" rel="noopener" href="https://pro.ant.design/zh-CN/docs/development">启动项目 - Ant Design Pro</a></h5></li>
<li><h5 id="将来开发个人网站，或者开发个人项目，都可以基于Ant-Design-Pro框架，更快捷、更高效"><a href="#将来开发个人网站，或者开发个人项目，都可以基于Ant-Design-Pro框架，更快捷、更高效" class="headerlink" title="将来开发个人网站，或者开发个人项目，都可以基于Ant Design Pro框架，更快捷、更高效"></a>将来开发个人网站，或者开发个人项目，都可以基于Ant Design Pro框架，更快捷、更高效</h5></li>
</ul>
<h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="Vite-1"><a href="#Vite-1" class="headerlink" title="Vite"></a>Vite</h2><h3 id="开发思路"><a href="#开发思路" class="headerlink" title="开发思路"></a>开发思路</h3><ul>
<li><h5 id="使用-vite工具快速构建Vue开发框架来从零开发，要做什么？一定是做到以下几点：（2023-08-01午）"><a href="#使用-vite工具快速构建Vue开发框架来从零开发，要做什么？一定是做到以下几点：（2023-08-01午）" class="headerlink" title="使用 vite工具快速构建Vue开发框架来从零开发，要做什么？一定是做到以下几点：（2023/08/01午）"></a>使用 vite工具快速构建Vue开发框架来从零开发，要做什么？一定是做到以下几点：（2023/08/01午）</h5><ul>
<li><h5 id="vite-快速构建框架，启动项目"><a href="#vite-快速构建框架，启动项目" class="headerlink" title="vite 快速构建框架，启动项目"></a>vite 快速构建框架，启动项目</h5></li>
<li><h5 id="配置启动端口"><a href="#配置启动端口" class="headerlink" title="配置启动端口"></a>配置启动端口</h5></li>
<li><h5 id="全局axios配置，开发全局请求拦截和相应拦截器，做好跨域请求处理"><a href="#全局axios配置，开发全局请求拦截和相应拦截器，做好跨域请求处理" class="headerlink" title="全局axios配置，开发全局请求拦截和相应拦截器，做好跨域请求处理"></a>全局axios配置，开发全局请求拦截和相应拦截器，做好跨域请求处理</h5></li>
</ul>
</li>
</ul>
<h3 id="快速搭建"><a href="#快速搭建" class="headerlink" title="快速搭建"></a>快速搭建</h3><ul>
<li><h5 id="官网：开始-Vite-官方中文文档-vitejs-dev"><a href="#官网：开始-Vite-官方中文文档-vitejs-dev" class="headerlink" title="官网：开始 | Vite 官方中文文档 (vitejs.dev)"></a>官网：<a target="_blank" rel="noopener" href="https://cn.vitejs.dev/guide/">开始 | Vite 官方中文文档 (vitejs.dev)</a></h5></li>
<li><h5 id="使用-vite-构建工具快速构建Vue框架："><a href="#使用-vite-构建工具快速构建Vue框架：" class="headerlink" title="使用 vite 构建工具快速构建Vue框架："></a>使用 vite 构建工具快速构建Vue框架：</h5></li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> create vite@latest<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="cd-进项目目录，安装依赖："><a href="#cd-进项目目录，安装依赖：" class="headerlink" title="cd 进项目目录，安装依赖："></a>cd 进项目目录，安装依赖：</h5></li>
</ul>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="修改tsconfig-json文件，添加如下配置："><a href="#修改tsconfig-json文件，添加如下配置：" class="headerlink" title="修改tsconfig.json文件，添加如下配置："></a>修改tsconfig.json文件，添加如下配置：</h5></li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-attr">&quot;moduleResolution&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Node&quot;</span><span class="hljs-punctuation">,</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="如果依赖安装失败，可能是npm镜像源的问题，两种解决方法："><a href="#如果依赖安装失败，可能是npm镜像源的问题，两种解决方法：" class="headerlink" title="如果依赖安装失败，可能是npm镜像源的问题，两种解决方法："></a>如果依赖安装失败，可能是npm镜像源的问题，两种解决方法：</h5><ul>
<li><h5 id="修改镜像源：淘宝镜像-gt-官方镜像"><a href="#修改镜像源：淘宝镜像-gt-官方镜像" class="headerlink" title="修改镜像源：淘宝镜像 -&gt; 官方镜像"></a>修改镜像源：淘宝镜像 -&gt; 官方镜像</h5></li>
</ul>
<figure class="highlight tcl"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs tcl">npm <span class="hljs-keyword">set</span> <span class="hljs-keyword">registry</span> https://<span class="hljs-keyword">registry</span>.npmjs.org/<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="使用yarn包管理工具："><a href="#使用yarn包管理工具：" class="headerlink" title="使用yarn包管理工具："></a>使用yarn包管理工具：</h5></li>
</ul>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs cmake">yarn <span class="hljs-keyword">install</span><br></code></pre></td></tr></table></figure></li>
<li><h5 id="启动项目：（2023-08-01早）"><a href="#启动项目：（2023-08-01早）" class="headerlink" title="启动项目：（2023/08/01早）"></a>启动项目：（2023/08/01早）</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> dev<br></code></pre></td></tr></table></figure>

<figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">yarn dev</span><br></code></pre></td></tr></table></figure>

<h3 id="启动端口"><a href="#启动端口" class="headerlink" title="启动端口"></a>启动端口</h3><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs awk"><span class="hljs-regexp">//</span> https:<span class="hljs-regexp">//</span>vitejs.dev<span class="hljs-regexp">/config/</span><br>export default defineConfig(&#123;<br>  plugins: [vue()],<br>  server: &#123;<br>    port: <span class="hljs-number">7073</span>, <span class="hljs-regexp">//</span> 修改为你想要的端口号<br>  &#125;,<br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="全局axios配置"><a href="#全局axios配置" class="headerlink" title="全局axios配置"></a>全局axios配置</h3><ul>
<li><h5 id="全局安装-axios："><a href="#全局安装-axios：" class="headerlink" title="全局安装 axios："></a>全局安装 axios：</h5></li>
</ul>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> axios<br></code></pre></td></tr></table></figure>

<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">yarn <span class="hljs-built_in">add</span> axios<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在指定目录下封装全局请求-响应拦截器："><a href="#在指定目录下封装全局请求-响应拦截器：" class="headerlink" title="在指定目录下封装全局请求/响应拦截器："></a>在指定目录下封装全局请求/响应拦截器：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;axios&quot;</span>;<br><br><span class="hljs-comment">// 创建 Axios 实例</span><br><span class="hljs-keyword">const</span> myAxios = axios.<span class="hljs-title function_">create</span>(&#123;<br>  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">&quot;http://localhost:8083/api&quot;</span>, <span class="hljs-comment">// 设置请求的基础URL</span><br>  <span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span>,<br>&#125;);<br><br><span class="hljs-comment">// 处理请求拦截器</span><br>myAxios.<span class="hljs-property">interceptors</span>.<span class="hljs-property">request</span>.<span class="hljs-title function_">use</span>(<br>  <span class="hljs-function">(<span class="hljs-params">config</span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">// 在请求发送之前做一些处理</span><br>    <span class="hljs-keyword">return</span> config;<br>  &#125;,<br>  <span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">// 发送请求错误时的处理</span><br>    <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error);<br>  &#125;<br>);<br><br><span class="hljs-comment">// 处理响应拦截器</span><br>myAxios.<span class="hljs-property">interceptors</span>.<span class="hljs-property">response</span>.<span class="hljs-title function_">use</span>(<br>  <span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">// 对响应数据做处理</span><br>    <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>  &#125;,<br>  <span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">// 响应错误时的处理</span><br>    <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error);<br>  &#125;<br>);<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> myAxios;<br></code></pre></td></tr></table></figure>

<h3 id="组件样式BUG"><a href="#组件样式BUG" class="headerlink" title="组件样式BUG"></a>组件样式BUG</h3><ul>
<li><h5 id="在做Memory-伙伴匹配时，一直有一个问题困扰着我：组件样式有问题"><a href="#在做Memory-伙伴匹配时，一直有一个问题困扰着我：组件样式有问题" class="headerlink" title="在做Memory-伙伴匹配时，一直有一个问题困扰着我：组件样式有问题"></a>在做Memory-伙伴匹配时，一直有一个问题困扰着我：组件样式有问题</h5></li>
<li><h5 id="这次使用Vue从零开发壁纸网站时，终于彻查了这个不起眼的问题："><a href="#这次使用Vue从零开发壁纸网站时，终于彻查了这个不起眼的问题：" class="headerlink" title="这次使用Vue从零开发壁纸网站时，终于彻查了这个不起眼的问题："></a>这次使用Vue从零开发壁纸网站时，终于彻查了这个不起眼的问题：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> &#123; createApp &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-string">&quot;vant/lib/index.css&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Vant</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vant&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App.vue&quot;</span>;<br><br><span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>).<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Vant</span>).<span class="hljs-title function_">mount</span>(<span class="hljs-string">&quot;#app&quot;</span>);<br><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="没错，只需在main-ts下，引入-“vant-lib-index-css”-样式即可（2023-08-02早）"><a href="#没错，只需在main-ts下，引入-“vant-lib-index-css”-样式即可（2023-08-02早）" class="headerlink" title="没错，只需在main.ts下，引入 “vant/lib/index.css” 样式即可（2023/08/02早）"></a>没错，只需在main.ts下，引入 “vant/lib/index.css” 样式即可（2023/08/02早）</h5></li>
</ul>
<h3 id="请求头设置无效"><a href="#请求头设置无效" class="headerlink" title="请求头设置无效"></a>请求头设置无效</h3><ul>
<li><h5 id="这个真恶心到我了，POST请求的请求头设置无效（2023-08-01晚）"><a href="#这个真恶心到我了，POST请求的请求头设置无效（2023-08-01晚）" class="headerlink" title="这个真恶心到我了，POST请求的请求头设置无效（2023/08/01晚）"></a>这个真恶心到我了，POST请求的请求头设置无效（2023/08/01晚）</h5></li>
<li><h5 id="本来是打算做一个前端上传图片文件，后端接收的功能，但这涉及到前端如何发送，后端如何接收的问题"><a href="#本来是打算做一个前端上传图片文件，后端接收的功能，但这涉及到前端如何发送，后端如何接收的问题" class="headerlink" title="本来是打算做一个前端上传图片文件，后端接收的功能，但这涉及到前端如何发送，后端如何接收的问题"></a>本来是打算做一个前端上传图片文件，后端接收的功能，但这涉及到前端如何发送，后端如何接收的问题</h5></li>
<li><h5 id="做了大量的尝试，只有这种方法，才能在后端正常接收到图片文件："><a href="#做了大量的尝试，只有这种方法，才能在后端正常接收到图片文件：" class="headerlink" title="做了大量的尝试，只有这种方法，才能在后端正常接收到图片文件："></a>做了大量的尝试，只有这种方法，才能在后端正常接收到图片文件：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> myAxios<br>  .<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/wallpaper/upload&quot;</span>, file, &#123;<br>    <span class="hljs-attr">headers</span>: &#123;<br>      <span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;multipart/form-data&quot;</span>,<br>    &#125;,<br>  &#125;)<br>  .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>    <span class="hljs-keyword">if</span> (response.<span class="hljs-property">data</span>) &#123;<br>      <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>    &#125;<br>  &#125;)<br>  .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>  &#125;);<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@PostMapping(&quot;/upload&quot;)</span><br>  <span class="hljs-keyword">public</span> String <span class="hljs-title function_">uploadFile</span><span class="hljs-params">(<span class="hljs-meta">@RequestParam(&quot;file&quot;)</span> MultipartFile file)</span> &#123;<br>      <span class="hljs-keyword">if</span> (file.isEmpty()) &#123;<br>          <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;上传的文件为空&quot;</span>;<br>      &#125;<br><br>      <span class="hljs-comment">// 处理上传的文件</span><br>      <span class="hljs-keyword">try</span> &#123;<br>          <span class="hljs-type">byte</span>[] bytes = file.getBytes();<br>          <span class="hljs-comment">// 可以选择保存文件到服务器的指定路径</span><br>          <span class="hljs-comment">// Files.write(Paths.get(&quot;文件保存路径&quot;), bytes);</span><br><br>          <span class="hljs-comment">// 在这里可以根据需要进行相关的业务逻辑处理</span><br><br>          <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;文件上传成功&quot;</span>;<br>      &#125; <span class="hljs-keyword">catch</span> (IOException e) &#123;<br>          e.printStackTrace();<br>      &#125;<br>      <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;文件上传失败&quot;</span>;<br>  &#125;<br></code></pre></td></tr></table></figure>

<h2 id="Ant-Design-Pro-1"><a href="#Ant-Design-Pro-1" class="headerlink" title="Ant Design Pro"></a>Ant Design Pro</h2><h3 id="快速搭建-1"><a href="#快速搭建-1" class="headerlink" title="快速搭建"></a>快速搭建</h3><ul>
<li><h5 id="官网：开始使用-Ant-Design-Pro"><a href="#官网：开始使用-Ant-Design-Pro" class="headerlink" title="官网：开始使用 - Ant Design Pro"></a>官网：<a target="_blank" rel="noopener" href="https://pro.ant.design/zh-CN/docs/getting-started">开始使用 - Ant Design Pro</a></h5></li>
<li><h5 id="我们可以按以下步骤，快速搭建Ant-Design-Pro脚手架："><a href="#我们可以按以下步骤，快速搭建Ant-Design-Pro脚手架：" class="headerlink" title="我们可以按以下步骤，快速搭建Ant Design Pro脚手架："></a>我们可以按以下步骤，快速搭建Ant Design Pro脚手架：</h5></li>
<li><h5 id="在正确安装Node-js环境下的前提下，依次执行以下命令："><a href="#在正确安装Node-js环境下的前提下，依次执行以下命令：" class="headerlink" title="在正确安装Node.js环境下的前提下，依次执行以下命令："></a>在正确安装Node.js环境下的前提下，依次执行以下命令：</h5></li>
<li><h5 id="使用npm全局安装-pro-cli-构建工具（脚手架）："><a href="#使用npm全局安装-pro-cli-构建工具（脚手架）：" class="headerlink" title="使用npm全局安装 pro-cli 构建工具（脚手架）："></a>使用npm全局安装 pro-cli 构建工具（脚手架）：</h5></li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> i @ant-design/pro-cli -g<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="使用脚手架，在指定目录下快速搭建前端框架："><a href="#使用脚手架，在指定目录下快速搭建前端框架：" class="headerlink" title="使用脚手架，在指定目录下快速搭建前端框架："></a>使用脚手架，在指定目录下快速搭建前端框架：</h5></li>
</ul>
<figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs stata"><span class="hljs-keyword">pro</span> create <span class="hljs-keyword">memory</span>-api <br></code></pre></td></tr></table></figure>

<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20240130210310142.png" alt="image-20240130210310142"></p>
<ul>
<li><h5 id="项目下安装yarn包管理工具："><a href="#项目下安装yarn包管理工具：" class="headerlink" title="项目下安装yarn包管理工具："></a>项目下安装yarn包管理工具：</h5></li>
</ul>
<figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ebnf"><span class="hljs-attribute">yarn -V</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="至此，前端项目框架搭建完成，启动项目：（2023-07-21晚）"><a href="#至此，前端项目框架搭建完成，启动项目：（2023-07-21晚）" class="headerlink" title="至此，前端项目框架搭建完成，启动项目：（2023/07/21晚）"></a>至此，前端项目框架搭建完成，启动项目：（2023/07/21晚）</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">yarn <span class="hljs-built_in">run</span> start<br></code></pre></td></tr></table></figure>

<h3 id="页面路由报错"><a href="#页面路由报错" class="headerlink" title="页面路由报错"></a>页面路由报错</h3><ul>
<li><h5 id="在-config-routes-ts-下设置好页面路由后，一定要在对应组件下添加index-tsx文件："><a href="#在-config-routes-ts-下设置好页面路由后，一定要在对应组件下添加index-tsx文件：" class="headerlink" title="在 config/routes.ts 下设置好页面路由后，一定要在对应组件下添加index.tsx文件："></a>在 config/routes.ts 下设置好页面路由后，一定要在对应组件下添加index.tsx文件：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-comment">//接口全部详情页</span><br>&#123;<br>  <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;接口详情&#x27;</span>,<br>  <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>  <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/interfaceInfo/info&#x27;</span>,<br>  <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/entireCommend&#x27;</span>,<br>&#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="否则项目启动后会报错：（2023-08-05晚）"><a href="#否则项目启动后会报错：（2023-08-05晚）" class="headerlink" title="否则项目启动后会报错：（2023/08/05晚）"></a>否则项目启动后会报错：（2023/08/05晚）</h5></li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230805233331422.png" alt="image-20230805233331422"></p>
<h3 id="页面路由跳转（1）"><a href="#页面路由跳转（1）" class="headerlink" title="页面路由跳转（1）"></a>页面路由跳转（1）</h3><ul>
<li><h5 id="使用-umi-router-实现路由跳转："><a href="#使用-umi-router-实现路由跳转：" class="headerlink" title="使用 umi/router 实现路由跳转："></a>使用 umi/router 实现路由跳转：</h5></li>
<li><h5 id="官网：在页面间跳转-UmiJS"><a href="#官网：在页面间跳转-UmiJS" class="headerlink" title="官网：在页面间跳转 | UmiJS"></a>官网：<a target="_blank" rel="noopener" href="https://v2.umijs.org/zh/guide/navigate-between-pages.html#%E5%A3%B0%E6%98%8E%E5%BC%8F">在页面间跳转 | UmiJS</a></h5></li>
<li><h5 id="全局安装-umi："><a href="#全局安装-umi：" class="headerlink" title="全局安装 umi："></a>全局安装 umi：</h5></li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs"><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="命令式跳转："><a href="#命令式跳转：" class="headerlink" title="命令式跳转："></a>命令式跳转：</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;umi/router&#x27;</span>;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">goToListPage</span>(<span class="hljs-params"></span>) &#123;<br>  router.<span class="hljs-title function_">push</span>(<span class="hljs-string">&#x27;/list&#x27;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="声明式跳转：（2023-08-05晚）"><a href="#声明式跳转：（2023-08-05晚）" class="headerlink" title="声明式跳转：（2023/08/05晚）"></a>声明式跳转：（2023/08/05晚）</h5></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Link</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;umi/link&#x27;</span>;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> () =&gt; (<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/list&quot;</span>&gt;</span>Go to list page<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span><br>);<br></code></pre></td></tr></table></figure>

<h3 id="OpenAI生成接口"><a href="#OpenAI生成接口" class="headerlink" title="OpenAI生成接口"></a>OpenAI生成接口</h3><ul>
<li><h5 id="如何使用-Knif4j-Swagger2生成请求接口文档，可以参考学习《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文"><a href="#如何使用-Knif4j-Swagger2生成请求接口文档，可以参考学习《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文" class="headerlink" title="如何使用 Knif4j + Swagger2生成请求接口文档，可以参考学习《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文"></a>如何使用 Knif4j + Swagger2生成请求接口文档，可以参考学习《快速启动：开发自己的定制化-Spring-Boot-项目模板》一文</h5></li>
<li><p>官网文档：<a target="_blank" rel="noopener" href="https://doc.xiaominfo.com/">Knife4j · 集Swagger2及OpenAPI3为一体的增强解决方案. | Knife4j (xiaominfo.com)</a>（2023/08/25晚）</p>
</li>
<li><h5 id="后端接口文档："><a href="#后端接口文档：" class="headerlink" title="后端接口文档："></a>后端接口文档：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230809132710999.png" alt="image-20230809132710999"></p>
<ul>
<li>前端 config/config.ts下的配置：</li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-attr">openAPI</span>: [<br>   &#123;<br>     <span class="hljs-attr">requestLibPath</span>: <span class="hljs-string">&quot;import &#123; request &#125; from &#x27;@umijs/max&#x27;&quot;</span>,<br>     <span class="hljs-attr">schemaPath</span>: <span class="hljs-string">&#x27;http://localhost:8104/api/v2/api-docs?group=壁纸分享&#x27;</span>,<br>     <span class="hljs-attr">projectName</span>: <span class="hljs-string">&#x27;pic-memories&#x27;</span>,<br>   &#125;,<br> ],<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="执行以下命令，一键生成接口：（2023-08-09午）"><a href="#执行以下命令，一键生成接口：（2023-08-09午）" class="headerlink" title="执行以下命令，一键生成接口：（2023/08/09午）"></a>执行以下命令，一键生成接口：（2023/08/09午）</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> openapi<br></code></pre></td></tr></table></figure>

<h3 id="最简页面样式"><a href="#最简页面样式" class="headerlink" title="最简页面样式"></a>最简页面样式</h3><figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> &#123; listInterfaceInfoByPageUsingPOST &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@/services/memory-api/interfaceInfoController&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">ProList</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@ant-design/pro-components&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Space</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;antd&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, &#123; useEffect, useState &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123; useHistory &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-router-dom&#x27;</span>;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">InterfaceInfoList</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span> = <span class="hljs-function">(<span class="hljs-params">props</span>) =&gt;</span> &#123;<br>  <span class="hljs-keyword">const</span> [interfaceInfo, setInterfaceInfo] = useState&lt;<span class="hljs-variable constant_">API</span>.<span class="hljs-property">InterfaceInfo</span>[]&gt;([]);<br><br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchData</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">params: &#123; pageSize?: <span class="hljs-built_in">number</span>; current?: <span class="hljs-built_in">number</span> &#125;</span>) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>      <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">listInterfaceInfoByPageUsingPOST</span>(&#123;<br>        ...params,<br>      &#125;);<br><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;res = &#x27;</span> + res.<span class="hljs-property">data</span>?.<span class="hljs-property">records</span>);<br><br>      <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span>) &#123;<br>        <span class="hljs-title function_">setInterfaceInfo</span>(res.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>);<br>      &#125;<br><br>      <span class="hljs-comment">// 对返回的数据进行处理</span><br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(error);<br>    &#125;<br>  &#125;;<br><br>  <span class="hljs-keyword">const</span> history = <span class="hljs-title function_">useHistory</span>();<br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleButtonClick</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>    <span class="hljs-comment">// 在按钮点击事件中触发页面跳转</span><br>    history.<span class="hljs-title function_">push</span>(<span class="hljs-string">&#x27;/TableList/entireCommend&#x27;</span>);<br>  &#125;;<br><br>  <span class="hljs-keyword">return</span> (<br>    <span class="hljs-comment">// 页面渲染</span><br>    <span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;啊啊啊&#x27;</span>);<br>      <span class="hljs-title function_">fetchData</span>(<span class="hljs-number">1</span>, <span class="hljs-number">5</span>);<br>    &#125;, []),<br>    (<br>      <span class="hljs-comment">// 组件的其余部分</span><br>      &lt;<span class="hljs-title class_">ProList</span>&lt;<span class="hljs-built_in">any</span>&gt;<br>        rowKey=<span class="hljs-string">&quot;name&quot;</span><br>        headerTitle=<span class="hljs-string">&quot;基础列表&quot;</span><br>        tooltip=<span class="hljs-string">&quot;基础列表的配置&quot;</span><br>        dataSource=&#123;interfaceInfo&#125;<br>        metas=&#123;&#123;<br>          <span class="hljs-attr">title</span>: &#123;<br>            <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>          &#125;,<br>          <span class="hljs-attr">description</span>: &#123;<br>            <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&#x27;description&#x27;</span>,<br>          &#125;,<br>          <span class="hljs-attr">actions</span>: &#123;<br>            <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">text, row</span>) =&gt;</span> &#123;<br>              <span class="hljs-keyword">return</span> (<br>                <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Space</span>&gt;</span></span><br><span class="language-xml">                  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">                    <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">&#123;handleButtonClick&#125;</span>&gt;</span>跳转到目标页面<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span><br><span class="language-xml">                  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">                <span class="hljs-tag">&lt;/<span class="hljs-name">Space</span>&gt;</span></span><br>              );<br>            &#125;,<br>          &#125;,<br>        &#125;&#125;<br>      /&gt;<br>    )<br>  );<br>&#125;;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">InterfaceInfoList</span>;<br><br></code></pre></td></tr></table></figure>

<h3 id="改造框架"><a href="#改造框架" class="headerlink" title="改造框架"></a>改造框架</h3><ul>
<li><h5 id="今天我把API-接口开放平台的前端代码拉下来了，给PicMemories做一个管理员后台"><a href="#今天我把API-接口开放平台的前端代码拉下来了，给PicMemories做一个管理员后台" class="headerlink" title="今天我把API 接口开放平台的前端代码拉下来了，给PicMemories做一个管理员后台"></a>今天我把API 接口开放平台的前端代码拉下来了，给PicMemories做一个管理员后台</h5></li>
<li><h5 id="怎么快速改造呢？不要惊慌，做到三点即可：（2023-08-11晚）"><a href="#怎么快速改造呢？不要惊慌，做到三点即可：（2023-08-11晚）" class="headerlink" title="怎么快速改造呢？不要惊慌，做到三点即可：（2023/08/11晚）"></a>怎么快速改造呢？不要惊慌，做到三点即可：（2023/08/11晚）</h5><ul>
<li>修改接口文档地址，重新生成接口</li>
<li>改造获取用户登录态接口</li>
<li>改造登录接口</li>
<li>改造获取表单信息接口</li>
</ul>
</li>
</ul>
<h3 id="路由配置错误"><a href="#路由配置错误" class="headerlink" title="路由配置错误"></a>路由配置错误</h3><ul>
<li>如果项目启动报如下错误：</li>
</ul>
<figure class="highlight moonscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs moonscript">PS <span class="hljs-name">D</span>:\Project\星球项目\memory-api\memory-api-frontend&gt; yarn <span class="hljs-name">start</span>:dev<br>yarn run v1<span class="hljs-number">.22</span><span class="hljs-number">.19</span><br>$ cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev<br>    at Proxy.getRoutes (<span class="hljs-name">D</span>:\Project\星球项目\memory-api\memory-api-frontend\node_modules\@umijs\preset-umi\dist\features\tmpFiles\routes.<span class="hljs-name">js</span>:<span class="hljs-number">61</span>:<span class="hljs-number">46</span>)<br>    at Hook.fn (<span class="hljs-name">D</span>:\Project\星球项目\memory-api\memory-api-frontend\node_modules\@umijs\preset-umi\dist\features\appData\appData.<span class="hljs-name">js</span>:<span class="hljs-number">51</span>:<span class="hljs-number">35</span>)<br>    at <span class="hljs-name">D</span>:\Project\星球项目\memory-api\memory-api-frontend\node_modules\@umijs\core\dist\service\service.<span class="hljs-name">js</span>:<span class="hljs-number">136</span>:<span class="hljs-number">38</span> &#123;<br>  <span class="hljs-name">code</span>: <span class="hljs-string">&#x27;MODULE_NOT_FOUND&#x27;</span><br>&#125;<br>fatal - A complete log of this run can be found <span class="hljs-name">in</span>:<br>fatal - <span class="hljs-name">D</span>:\Project\星球项目\memory-api\memory-api-frontend\node_modules\.cache\logger\umi.log<br>fatal - Consider reporting a GitHub issue on <span class="hljs-name">https</span>://github.com/umijs/umi/issues<br>Done <span class="hljs-keyword">in</span> <span class="hljs-number">3.83</span>s.<br><br></code></pre></td></tr></table></figure>

<ul>
<li><p>肯定是路由配置错误了，检查检查吧</p>
</li>
<li><h5 id="好像上面的栏目提到过。。（2023-08-16午）"><a href="#好像上面的栏目提到过。。（2023-08-16午）" class="headerlink" title="好像上面的栏目提到过。。（2023/08/16午）"></a>好像上面的栏目提到过。。（2023/08/16午）</h5></li>
</ul>
<h3 id="可视化数据图表"><a href="#可视化数据图表" class="headerlink" title="可视化数据图表"></a>可视化数据图表</h3><ul>
<li><h5 id="Apache-ECharts：Apache-ECharts"><a href="#Apache-ECharts：Apache-ECharts" class="headerlink" title="Apache ECharts：Apache ECharts"></a>Apache ECharts：<a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/index.html">Apache ECharts</a></h5></li>
<li><h5 id="AntV：AntV-蚂蚁数据可视化"><a href="#AntV：AntV-蚂蚁数据可视化" class="headerlink" title="AntV：AntV | 蚂蚁数据可视化"></a>AntV：<a target="_blank" rel="noopener" href="https://antv.vision/">AntV | 蚂蚁数据可视化</a></h5></li>
<li><h5 id="进入官网，找到相中的图表，在线调试，复制代码：（2023-08-25晚）"><a href="#进入官网，找到相中的图表，在线调试，复制代码：（2023-08-25晚）" class="headerlink" title="进入官网，找到相中的图表，在线调试，复制代码：（2023/08/25晚）"></a>进入官网，找到相中的图表，在线调试，复制代码：（2023/08/25晚）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230825204907577.png" alt="image-20230825204907577"></p>
<h3 id="最简页面2-0"><a href="#最简页面2-0" class="headerlink" title="最简页面2.0"></a>最简页面2.0</h3><ul>
<li>这里再补充一下React的最简页面：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs react">import &#123;PageContainer&#125; from &#x27;@ant-design/pro-components&#x27;;<br>import &#x27;@umijs/max&#x27;;<br>import ReactECharts from &#x27;echarts-for-react&#x27;;<br>import * as echarts from &#x27;echarts&#x27;;<br><br>/**<br> * 接口分析<br> * @constructor<br> */<br>const testAnalysis: React.FC = () =&gt; &#123;<br>  const option = &#123;&#125;<br>  <br>  return (<br>    &lt;PageContainer&gt;<br>      &lt;ReactECharts option=&#123;option&#125;/&gt;<br>    &lt;/PageContainer&gt;<br>  );<br>&#125;;<br>export default testAnalysis;<br></code></pre></td></tr></table></figure>

<ul>
<li><p>也就像我这样的前端小白，才会记录这些再简单不过的语法了😍</p>
</li>
<li><h5 id="呐，直接粘贴代码，看效果就完事了："><a href="#呐，直接粘贴代码，看效果就完事了：" class="headerlink" title="呐，直接粘贴代码，看效果就完事了："></a>呐，直接粘贴代码，看效果就完事了：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230825205146265.png" alt="image-20230825205146265"></p>
<ul>
<li><h5 id="有时间就学学React框架语法了，挺有意思的，到时候总结点东西再记录下react的页面开发技巧（2023-08-25晚）"><a href="#有时间就学学React框架语法了，挺有意思的，到时候总结点东西再记录下react的页面开发技巧（2023-08-25晚）" class="headerlink" title="有时间就学学React框架语法了，挺有意思的，到时候总结点东西再记录下react的页面开发技巧（2023/08/25晚）"></a>有时间就学学React框架语法了，挺有意思的，到时候总结点东西再记录下react的页面开发技巧（2023/08/25晚）</h5></li>
</ul>
<h3 id="区分管理员页面和普通用户页面"><a href="#区分管理员页面和普通用户页面" class="headerlink" title="区分管理员页面和普通用户页面"></a>区分管理员页面和普通用户页面</h3><ul>
<li>在管理员账号下</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 管理员</span><br> &#123;<br>   <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,<br>   <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;admin&#x27;</span>,<br>   <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;smile&#x27;</span>,<br>   <span class="hljs-attr">routes</span>: [<br>     <span class="hljs-comment">//用户信息页</span><br>     &#123;<br>       <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;用户信息&#x27;</span>,<br>       <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>       <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>       <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/list&#x27;</span>,<br>       <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/Admin/User&#x27;</span>,<br>     &#125;,<br>     <span class="hljs-comment">//接口信息页</span><br>     &#123;<br>       <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;接口信息&#x27;</span>,<br>       <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>       <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>       <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/interfaceInfo/list&#x27;</span>,<br>       <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/Admin/InterfaceInfo&#x27;</span>,<br>     &#125;,<br>     <span class="hljs-comment">// 接口分析页</span><br>     &#123;<br>       <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;接口分析&#x27;</span>,<br>       <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;user&#x27;</span>,<br>       <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/admin/interface_analysis&#x27;</span>,<br>       <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./TableList/Admin/InterfaceAnalysis&#x27;</span><br>     &#125;,<br><br>   ],<br> &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="如上，新增了一个二级菜单：管理员页面"><a href="#如上，新增了一个二级菜单：管理员页面" class="headerlink" title="如上，新增了一个二级菜单：管理员页面"></a>如上，新增了一个二级菜单：管理员页面</h5></li>
<li><p>值得注意的是，这里管理员页面默认路由为 /，如果想实现访问 / 跳转至/welcome，则可以这样写：</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs ts"> <span class="hljs-comment">//欢迎页</span><br>&#123;<br>   <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/welcome&#x27;</span>,<br>   <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;welcome&#x27;</span>,<br>   <span class="hljs-attr">icon</span>: <span class="hljs-string">&#x27;smile&#x27;</span>,<br>   <span class="hljs-attr">component</span>: <span class="hljs-string">&#x27;./Welcome&#x27;</span>,<br>&#125;, <br>    <br>&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,<br>    <span class="hljs-attr">redirect</span>: <span class="hljs-string">&#x27;/welcome&#x27;</span>,<br>&#125;,<br>    <br> <span class="hljs-comment">// 管理员</span><br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,<br>    <span class="hljs-attr">access</span>: <span class="hljs-string">&#x27;canAdmin&#x27;</span>,<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;admin&#x27;</span>,<br>   ....................<br>  &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至-welcome（2023-09-27午）"><a href="#如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至-welcome（2023-09-27午）" class="headerlink" title="如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至/welcome（2023/09/27午）"></a>如上，这里的重定向一定要写在管理员页面路由的前面，这样才能正常跳转至/welcome（2023/09/27午）</h5></li>
</ul>
<h3 id="Prettier-美化配置"><a href="#Prettier-美化配置" class="headerlink" title="Prettier 美化配置"></a>Prettier 美化配置</h3><ul>
<li>配置<strong>生效文件</strong>，以及<strong>快速格式化时</strong>，使用 Prettier 帮助<strong>快速美化代码</strong> <strong>（2023/10/08早）</strong></li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20231008092500820.png" alt="image-20231008092500820"></p>
<h3 id="一条龙完成-Ant-Design-Pro-初始化"><a href="#一条龙完成-Ant-Design-Pro-初始化" class="headerlink" title="一条龙完成 Ant Design Pro 初始化"></a>一条龙完成 Ant Design Pro 初始化</h3><ul>
<li><p>这是一个全新的、思路清晰的框架<strong>优化瘦身一条龙操作技巧</strong>，废话少说，开始<strong>打造自己的前端框架</strong>：</p>
</li>
<li><h5 id="优化瘦身顺序："><a href="#优化瘦身顺序：" class="headerlink" title="优化瘦身顺序："></a>优化瘦身顺序：</h5><ul>
<li><strong>框架初始化</strong>：完成项目的首次构建，能够成功运行项目</li>
<li><strong>框架瘦身</strong>：删除不必要的组件 / 配置，减小框架体量，节省存储空间</li>
<li><strong>框架改造</strong>： <ul>
<li>配置后端接口文档，快速生成后端请求地址</li>
<li>接入后台已开发的登录 / 注册功能（用户登录、获取当前登录用户、管理员权限校验）</li>
</ul>
</li>
</ul>
</li>
<li><p>优化前提：</p>
<ul>
<li><h5 id="后端用户登录、获取当前登录用户、配置允许跨域请求、正确配置接口文档"><a href="#后端用户登录、获取当前登录用户、配置允许跨域请求、正确配置接口文档" class="headerlink" title="后端用户登录、获取当前登录用户、配置允许跨域请求、正确配置接口文档"></a>后端用户登录、获取当前登录用户、配置允许跨域请求、正确配置接口文档</h5></li>
<li><p>请确保以上<strong>接口开发 / 服务配置</strong>已经完成</p>
</li>
</ul>
</li>
</ul>
<h4 id="框架初始化"><a href="#框架初始化" class="headerlink" title="框架初始化"></a>框架初始化</h4><ul>
<li><p>一切按照官方文档来，毕竟前端框架组件更新迭代太快了：</p>
</li>
<li><h5 id="官网：开始使用-Ant-Design-Pro-1"><a href="#官网：开始使用-Ant-Design-Pro-1" class="headerlink" title="官网：开始使用 - Ant Design Pro"></a>官网：<a target="_blank" rel="noopener" href="https://pro.ant.design/zh-CN/docs/getting-started">开始使用 - Ant Design Pro</a></h5></li>
<li><h5 id="现阶段版本，只需依次执行以下命令即可：（2023-10-03晚）"><a href="#现阶段版本，只需依次执行以下命令即可：（2023-10-03晚）" class="headerlink" title="现阶段版本，只需依次执行以下命令即可：（2023/10/03晚）"></a>现阶段版本，只需依次执行以下命令即可：（2023/10/03晚）</h5></li>
<li><h5 id="使用npm全局安装-pro-cli-构建工具（脚手架）：-1"><a href="#使用npm全局安装-pro-cli-构建工具（脚手架）：-1" class="headerlink" title="使用npm全局安装 pro-cli 构建工具（脚手架）："></a>使用npm全局安装 pro-cli 构建工具（脚手架）：</h5></li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> i @ant-design/pro-cli -g<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="使用脚手架，在指定目录下快速搭建前端框架：-1"><a href="#使用脚手架，在指定目录下快速搭建前端框架：-1" class="headerlink" title="使用脚手架，在指定目录下快速搭建前端框架："></a>使用脚手架，在指定目录下快速搭建前端框架：</h5></li>
</ul>
<figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs stata"><span class="hljs-keyword">pro</span> create <span class="hljs-keyword">memory</span>-api <br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="项目下安装yarn包管理工具：-1"><a href="#项目下安装yarn包管理工具：-1" class="headerlink" title="项目下安装yarn包管理工具："></a>项目下安装yarn包管理工具：</h5></li>
</ul>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs cmake">yarn <span class="hljs-keyword">install</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="至此，前端项目框架搭建完成，启动项目：（2023-10-03晚）"><a href="#至此，前端项目框架搭建完成，启动项目：（2023-10-03晚）" class="headerlink" title="至此，前端项目框架搭建完成，启动项目：（2023/10/03晚）"></a>至此，前端项目框架搭建完成，启动项目：（2023/10/03晚）</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">yarn <span class="hljs-built_in">run</span> start<br></code></pre></td></tr></table></figure>

<h4 id="框架瘦身"><a href="#框架瘦身" class="headerlink" title="框架瘦身"></a>框架瘦身</h4><ul>
<li>删除不需要的代码，减小空间占用</li>
</ul>
<blockquote>
<p>国际化移出<br>mock移出<br>swagger移出<br>logo修改 移出<br>tests types 移出<br>prettier美化配置<br>jest config测试框架 删除<br>ds 全局替换 Ant Design Pro / Ant Design</p>
</blockquote>
<h4 id="框架改造"><a href="#框架改造" class="headerlink" title="框架改造"></a>框架改造</h4><blockquote>
<p>登录注册<br>snap login.test 删除<br>删除lang<br>Subtitle 支持a标签 targetblank<br>initial Value 自动登录其他登录 删除<br>手机号登录 全部干掉 删除<br>忘记密码干掉 未登录？去注册<br>传参 userAccount userPassword<br>openApi 快速生成后端请求接口</p>
<p>登录请求 成功返回 失败捕获<br>获取当前登录用户fetch<br>删除未引用的</p>
<p>保存全局状态<br>只留current user 改类型<br>改调用方法<br>当前不是登录页面 返回 currenter<br>否则返回空</p>
<p>修改头像 水印<br>前端传递cokkie<br>修改请求拦截器 直接返回config<br>注册页面开发</p>
</blockquote>
<ul>
<li><h5 id="Login-页面："><a href="#Login-页面：" class="headerlink" title="Login 页面："></a>Login 页面：</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchUserInfo</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>   <span class="hljs-keyword">const</span> userInfo = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getLoginUserUsingGET</span>();<br>   <span class="hljs-keyword">if</span> (userInfo) &#123;<br>     <span class="hljs-title function_">flushSync</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>       <span class="hljs-title function_">setInitialState</span>(<span class="hljs-function">(<span class="hljs-params">s</span>) =&gt;</span> (&#123;<br>         ...s,<br>         <span class="hljs-attr">currentUser</span>: userInfo,<br>       &#125;));<br>     &#125;);<br>   &#125;<br> &#125;;<br></code></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleSubmit</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">values: API.UserLoginRequest</span>) =&gt; &#123;<br>   <span class="hljs-keyword">try</span> &#123;<br>     <span class="hljs-comment">// 登录</span><br>     <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">userLoginUsingPOST</span>(&#123; ...values, <span class="hljs-keyword">type</span> &#125;);<br>     <span class="hljs-keyword">if</span> (res.<span class="hljs-property">code</span> === <span class="hljs-number">0</span>) &#123;<br>       <span class="hljs-keyword">const</span> defaultLoginSuccessMessage = intl.<span class="hljs-title function_">formatMessage</span>(&#123;<br>         <span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;pages.login.success&#x27;</span>,<br>         <span class="hljs-attr">defaultMessage</span>: <span class="hljs-string">&#x27;登录成功！&#x27;</span>,<br>       &#125;);<br>       message.<span class="hljs-title function_">success</span>(defaultLoginSuccessMessage);<br>       <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetchUserInfo</span>();<br>       <span class="hljs-keyword">const</span> urlParams = <span class="hljs-keyword">new</span> <span class="hljs-title function_">URL</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">location</span>.<span class="hljs-property">href</span>).<span class="hljs-property">searchParams</span>;<br>       history.<span class="hljs-title function_">push</span>(urlParams.<span class="hljs-title function_">get</span>(<span class="hljs-string">&#x27;redirect&#x27;</span>) || <span class="hljs-string">&#x27;/&#x27;</span>);<br>       <span class="hljs-keyword">return</span>;<br>     &#125;<br>   &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>     <span class="hljs-keyword">const</span> defaultLoginFailureMessage = <span class="hljs-string">&#x27;登录失败，请重试！&#x27;</span><br>     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error);<br>     message.<span class="hljs-title function_">error</span>(defaultLoginFailureMessage);<br>   &#125;<br> &#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="app-tsx-页面："><a href="#app-tsx-页面：" class="headerlink" title="app.tsx 页面："></a>app.tsx 页面：</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">export</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">getInitialState</span>(<span class="hljs-params"></span>): <span class="hljs-title class_">Promise</span>&lt;&#123;<br>  currentUser?: <span class="hljs-variable constant_">API</span>.<span class="hljs-property">LoginUserVO</span>;<br>&#125;&gt; &#123;<br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchUserInfo</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>      <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">getLoginUserUsingGET</span>(&#123;<br>        <span class="hljs-attr">skipErrorHandler</span>: <span class="hljs-literal">true</span>,<br>      &#125;);<br>      <span class="hljs-keyword">return</span> res.<span class="hljs-property">data</span>;<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>      history.<span class="hljs-title function_">push</span>(loginPath);<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-literal">undefined</span>;<br>  &#125;;<br>  <br>  <span class="hljs-comment">// 如果不是登录页面，执行</span><br>  <span class="hljs-keyword">const</span> &#123;location&#125; = history;<br>  <span class="hljs-keyword">if</span> (location.<span class="hljs-property">pathname</span> !== loginPath) &#123;<br>    <span class="hljs-keyword">const</span> currentUser = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetchUserInfo</span>();<br>    <span class="hljs-keyword">return</span> &#123;<br>      currentUser,<br>    &#125;;<br>  &#125;<br>  <span class="hljs-keyword">return</span> &#123;&#125;;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="access-tsx-页面："><a href="#access-tsx-页面：" class="headerlink" title="access.tsx 页面："></a>access.tsx 页面：</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">access</span>(<span class="hljs-params">initialState: &#123; currentUser?: API.LoginUserVO &#125; | <span class="hljs-literal">undefined</span></span>) &#123;<br>  <span class="hljs-keyword">const</span> &#123; currentUser &#125; = initialState ?? &#123;&#125;;<br>  <span class="hljs-keyword">return</span> &#123;<br>    <span class="hljs-attr">canAdmin</span>: currentUser &amp;&amp; currentUser.<span class="hljs-property">userRole</span> === <span class="hljs-string">&#x27;0&#x27;</span>,<br>  &#125;;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="config-ts-页面："><a href="#config-ts-页面：" class="headerlink" title="config.ts 页面："></a>config.ts 页面：</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-attr">openAPI</span>: [<br>   &#123;<br>     <span class="hljs-attr">requestLibPath</span>: <span class="hljs-string">&quot;import &#123; request &#125; from &#x27;@umijs/max&#x27;&quot;</span>,<br>     <span class="hljs-comment">// 或者使用在线的版本</span><br>     <span class="hljs-attr">schemaPath</span>: <span class="hljs-string">&quot;http://localhost:8101/api/v2/api-docs&quot;</span>,<br>     <span class="hljs-attr">projectName</span>: <span class="hljs-string">&#x27;memory-bi&#x27;</span>,<br>     <span class="hljs-attr">mock</span>: <span class="hljs-literal">false</span>,<br>   &#125;,<br> ],<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这里踩了个很恶心的-BUG，执行完成-run-openapi-之后，有些方法调用的路径会发生紊乱："><a href="#这里踩了个很恶心的-BUG，执行完成-run-openapi-之后，有些方法调用的路径会发生紊乱：" class="headerlink" title="这里踩了个很恶心的 BUG，执行完成 run openapi 之后，有些方法调用的路径会发生紊乱："></a>这里踩了个很恶心的 BUG，执行完成 run openapi 之后，有些方法调用的路径会发生紊乱：</h5></li>
</ul>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs clean"><span class="hljs-keyword">import</span> &#123; outLogin &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@//services/ant-design-pro/login&#x27;</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="修改调整一番就好了（2023-10-03晚）"><a href="#修改调整一番就好了（2023-10-03晚）" class="headerlink" title="修改调整一番就好了（2023/10/03晚）"></a>修改调整一番就好了（2023/10/03晚）</h5></li>
</ul>
<h3 id="开发一个页面的步骤"><a href="#开发一个页面的步骤" class="headerlink" title="开发一个页面的步骤"></a>开发一个页面的步骤</h3><ul>
<li><h5 id="创建路由和页面（2023-10-11晚）"><a href="#创建路由和页面（2023-10-11晚）" class="headerlink" title="创建路由和页面（2023/10/11晚）"></a>创建路由和页面（2023/10/11晚）</h5></li>
<li><p>获取需要的数据，定义 state 变量来存储数据，用于页面展示</p>
</li>
<li><p>先把<strong>最简单</strong>、<strong>最直观</strong>的数据展示给前端，再去调样式</p>
</li>
<li><p>引入 <strong>Ant Design</strong> 的 List 组件，复制示例代码</p>
</li>
<li><p>调整 List 组件中的内容为自己的（注意，获取用户头像可以从初始化状态中获取）</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> &#123; initialState&#125; = <span class="hljs-title function_">useModel</span>(<span class="hljs-string">&#x27;@@initialState&#x27;</span>);<br><span class="hljs-keyword">const</span> &#123; currentUser &#125; = initialState ?? &#123;&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li>针对样式，对数据进行一些处理，比如<strong>统一隐藏自身的 title</strong></li>
<li>增加<strong>分页</strong>（<strong>当前页码、每页展示数、总记录数</strong>）、增加<strong>展示列</strong></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;List<br>        grid=&#123;&#123;<br>          gutter: 16,<br>          xs: 1,<br>          sm: 1,<br>          md: 1,<br>          lg: 2,<br>          xl: 2,<br>          xxl: 2,<br>        &#125;&#125;<br>        itemLayout=&quot;vertical&quot;<br>        size=&quot;large&quot;<br>        pagination=&#123;&#123;<br>          onChange: (page) =&gt; &#123;<br>            setSearchParams(&#123;<br>              ...searchParams,<br>              current: page,<br>            &#125;)<br>          &#125;,<br>          current: searchParams.current,<br>          pageSize: searchParams.pageSize,<br>          total: total,<br>        &#125;&#125;<br>        dataSource=&#123;chartList&#125;<br>        <br>        ..........................<br>        )&#125;<br>      /&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>增加<strong>搜索框</strong></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs react">&lt;Search<br>       className=&quot;margin-bottom-16&quot;<br>       placeholder=&quot;请输入图表名称&quot;<br>       enterButton<br>       loading=&#123;loading&#125;<br>       onSearch=&#123;(value) =&gt; &#123;<br>         // 设置搜索条件<br>         setSearchParams(&#123;<br>           ...initSearchParams,<br>           name: value,<br>         &#125;)<br>       &#125;&#125;/&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>其他优化：比如<strong>添加 loading 效果</strong></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> [loading, setLoading] = useState&lt;<span class="hljs-built_in">boolean</span>&gt;(<span class="hljs-literal">false</span>)<br></code></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> <span class="hljs-title function_">loadData</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) =&gt; &#123;<br>   <span class="hljs-title function_">setLoading</span>(<span class="hljs-literal">true</span>);<br>   <span class="hljs-keyword">try</span> &#123;<br>     <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-title function_">listChartByPageUsingPOST</span>(searchParams);<br>     <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span>) &#123;<br>       <span class="hljs-comment">// 获取图表列表</span><br>       <span class="hljs-title function_">setChartList</span>(res.<span class="hljs-property">data</span>?.<span class="hljs-property">records</span> ?? []);<br>       <span class="hljs-comment">// 获取总数</span><br>       <span class="hljs-title function_">setTotal</span>(res.<span class="hljs-property">data</span>?.<span class="hljs-property">total</span> ?? <span class="hljs-number">0</span>);<br>       <span class="hljs-comment">// 搜索完成</span><br>       <span class="hljs-title function_">setLoading</span>(<span class="hljs-literal">false</span>);<br>     &#125; <span class="hljs-keyword">else</span> &#123;<br>       message.<span class="hljs-title function_">error</span>(<span class="hljs-string">&quot;获取我的图标失败&quot;</span>)<br>     &#125;<br>   &#125; <span class="hljs-keyword">catch</span> (<span class="hljs-attr">e</span>: <span class="hljs-built_in">any</span>) &#123;<br>     message.<span class="hljs-title function_">error</span>(<span class="hljs-string">&quot;获取我的图标失败&quot;</span> + e.<span class="hljs-property">message</span>)<br>   &#125;<br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>这里添加了一个 loading 效果，在<strong>执行搜索过程</strong>中（即<strong>按下搜索后，到数据成功返回的时间段</strong>），搜索按钮的<strong>状态为转圈圈</strong></li>
</ul>
<h3 id="模拟低网速运行状态"><a href="#模拟低网速运行状态" class="headerlink" title="模拟低网速运行状态"></a>模拟低网速运行状态</h3><ul>
<li><p>明白上面提到的搜索按钮的 loading 效果后，就应该明白： <strong>（2023/11/11晚）</strong></p>
</li>
<li><h5 id="只有执行搜索的时间越长，即响应的时间越长时，这个-loading-效果越明显"><a href="#只有执行搜索的时间越长，即响应的时间越长时，这个-loading-效果越明显" class="headerlink" title="只有执行搜索的时间越长，即响应的时间越长时，这个 loading 效果越明显"></a>只有执行搜索的时间越长，即响应的时间越长时，这个 loading 效果越明显</h5></li>
<li><p>那我们就要模拟服务在<strong>低网速状态运行</strong>的状态了，如下：</p>
</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231207235631152.png" alt="image-20231207235631152"></p>
<ul>
<li>选中对应的网络状态，就可以<strong>模仿在该网络环境下发送请求</strong>了 <strong>（2023/12/07晚）</strong></li>
</ul>
<h3 id="引入外部页面组件"><a href="#引入外部页面组件" class="headerlink" title="引入外部页面组件"></a>引入外部页面组件</h3><ul>
<li>如下，编写页面组件 <code>RandomPoem</code>：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 接口分析</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@constructor</span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">PageContainer</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@ant-design/pro-components&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">CaretRightFilled</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@ant-design/icons&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">Button</span>, <span class="hljs-title class_">Form</span>, message, <span class="hljs-title class_">Input</span>, <span class="hljs-title class_">Tag</span>, <span class="hljs-title class_">Table</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;antd&#x27;</span>;<br><span class="hljs-keyword">import</span> &#123;<span class="hljs-title class_">ColumnsType</span>&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;antd/es/table&quot;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, &#123;useState&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react&quot;</span>;<br><span class="hljs-keyword">import</span> initialState <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@@/plugin-initialState/@@initialState&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;invokeInterfaceInfoUsingPOST&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/services/memory-api/interfaceInfoController&quot;</span>;<br><span class="hljs-keyword">import</span> &#123;useParams&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@@/exports&quot;</span>;<br><br><span class="hljs-keyword">const</span> <span class="hljs-title class_">RandomPoem</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span> = <span class="hljs-function">() =&gt;</span> &#123;<br>.....................<br><br>  <span class="hljs-keyword">return</span> (<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">PageContainer</span>&gt;</span></span><br><span class="language-xml">      .....................</span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">PageContainer</span>&gt;</span></span><br>  );<br>&#125;;<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">RandomPoem</span>;<br></code></pre></td></tr></table></figure>

<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20231207235417783.png" alt="image-20231207235417783"></p>
<ul>
<li>在需要引入该组件的页面导入该组件，并引入：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> <span class="hljs-title class_">RandomPoem</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/pages/TableList/InterfaceInfo/RandomPoem&quot;</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231207235457463.png" alt="image-20231207235457463"></p>
<h2 id="Ant-Design-Vue-1"><a href="#Ant-Design-Vue-1" class="headerlink" title="Ant Design Vue"></a>Ant Design Vue</h2><ul>
<li><p>官网：<a target="_blank" rel="noopener" href="https://2x.antdv.com/docs/vue/getting-started-cn">Ant Design Vue (antdv.com)</a></p>
</li>
<li><h5 id="以下仅为开发过程中的个人经验总结，不具备教学价值，本人主Java后端，前端框架使用很不熟练-（2023-08-27早）"><a href="#以下仅为开发过程中的个人经验总结，不具备教学价值，本人主Java后端，前端框架使用很不熟练-（2023-08-27早）" class="headerlink" title="以下仅为开发过程中的个人经验总结，不具备教学价值，本人主Java后端，前端框架使用很不熟练~（2023/08/27早）"></a>以下仅为开发过程中的个人经验总结，不具备教学价值，本人主Java后端，前端框架使用很不熟练~（2023/08/27早）</h5></li>
</ul>
<h3 id="快速上手"><a href="#快速上手" class="headerlink" title="快速上手"></a>快速上手</h3><blockquote>
<p>🍖 推荐阅读：<a target="_blank" rel="noopener" href="https://cli.vuejs.org/">Home | Vue CLI (vuejs.org)</a><strong>（2024/01/15晚）</strong></p>
</blockquote>
<ul>
<li><h5 id="安装脚手架工具（2023-08-05午）"><a href="#安装脚手架工具（2023-08-05午）" class="headerlink" title="安装脚手架工具（2023/08/05午）"></a>安装脚手架工具（2023/08/05午）</h5></li>
</ul>
<figure class="highlight llvm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs llvm">npm install -g <span class="hljs-title">@vue</span>/cli<br>OR<br>yarn <span class="hljs-keyword">global</span> <span class="hljs-keyword">add</span> <span class="hljs-title">@vue</span>/cli<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="使用命令行进行初始化："><a href="#使用命令行进行初始化：" class="headerlink" title="使用命令行进行初始化："></a>使用命令行进行初始化：</h5></li>
</ul>
<figure class="highlight gauss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs gauss">vue <span class="hljs-keyword">create</span> antd-demo  <span class="hljs-meta">#项目名	</span><br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230826202427695.png" alt="image-20230826202427695"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240115221613317.png" alt="image-20240115221613317"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230826202435390.png" alt="image-20230826202435390"></p>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240115221624382.png" alt="image-20240115221624382"></p>
<ul>
<li><h5 id="按需选择，按我那样的设置就行，引入TS、Router等"><a href="#按需选择，按我那样的设置就行，引入TS、Router等" class="headerlink" title="按需选择，按我那样的设置就行，引入TS、Router等"></a>按需选择，按我那样的设置就行，引入TS、Router等</h5></li>
<li><p>注意这里同意保存预设的话，之后构建项目就会按照这次的配置直接构建了，如果要修改项目构建配置，则需执行以下代码：</p>
</li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> uninstall -g @vue/cli<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="然后重新构建（2023-08-26晚）"><a href="#然后重新构建（2023-08-26晚）" class="headerlink" title="然后重新构建（2023/08/26晚）"></a>然后重新构建（2023/08/26晚）</h5></li>
</ul>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ruby">npx <span class="hljs-variable">@vue</span>/cli create antd-demo	<span class="hljs-comment">#在临时目录中执行 <span class="hljs-doctag">@vue</span>/cli 命令，而不依赖于全局路径设置</span><br></code></pre></td></tr></table></figure>

<h3 id="引入Ant-Design组件"><a href="#引入Ant-Design组件" class="headerlink" title="引入Ant Design组件"></a>引入Ant Design组件</h3><ul>
<li><h5 id="引入组件："><a href="#引入组件：" class="headerlink" title="引入组件："></a>引入组件：</h5></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css">npm <span class="hljs-selector-tag">i</span> <span class="hljs-attr">--save</span> ant-design-vue<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="在main-ts中如此配置，引入Ant-Design组件："><a href="#在main-ts中如此配置，引入Ant-Design组件：" class="headerlink" title="在main.ts中如此配置，引入Ant Design组件："></a>在main.ts中如此配置，引入Ant Design组件：</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> &#123;createApp&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./App.vue&#x27;</span><br><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./router&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Antd</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;ant-design-vue&#x27;</span>;<br><br><span class="hljs-title function_">createApp</span>(<span class="hljs-title class_">App</span>).<span class="hljs-title function_">use</span>(router).<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Antd</span>).<span class="hljs-title function_">mount</span>(<span class="hljs-string">&#x27;#app&#x27;</span>)<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="启动项目：（2023-08-05午）"><a href="#启动项目：（2023-08-05午）" class="headerlink" title="启动项目：（2023/08/05午）"></a>启动项目：（2023/08/05午）</h5></li>
</ul>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> serve<br></code></pre></td></tr></table></figure>

<h3 id="配置路由"><a href="#配置路由" class="headerlink" title="配置路由"></a>配置路由</h3><ul>
<li><h5 id="route-ts中如此初始化："><a href="#route-ts中如此初始化：" class="headerlink" title="route.ts中如此初始化："></a>route.ts中如此初始化：</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> <span class="hljs-attr">routes</span>: <span class="hljs-title class_">Array</span>&lt;<span class="hljs-title class_">RouteRecordRaw</span>&gt; = [<br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;index&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-title class_">IndexPage</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>,<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;about&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="hljs-string">&#x27;../views/AboutView.vue&#x27;</span>)<br>  &#125;<br>]<br></code></pre></td></tr></table></figure>

<h3 id="封装全局axios"><a href="#封装全局axios" class="headerlink" title="封装全局axios"></a>封装全局axios</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;axios&quot;</span>;<br><br><span class="hljs-keyword">const</span> instance = axios.<span class="hljs-title function_">create</span>(&#123;<br>  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">&quot;http://localhost:8102/api&quot;</span>,<br>  <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</span>,<br>  <span class="hljs-attr">headers</span>: &#123;&#125;,<br>&#125;);<br><br><span class="hljs-comment">// 添加响应拦截器</span><br>instance.<span class="hljs-property">interceptors</span>.<span class="hljs-property">response</span>.<span class="hljs-title function_">use</span>(<br>  <span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) &#123;<br>    <span class="hljs-comment">// 2xx 范围内的状态码都会触发该函数。</span><br>    <span class="hljs-comment">// 对响应数据做点什么</span><br>    <span class="hljs-keyword">const</span> data = response.<span class="hljs-property">data</span>;<br>    <span class="hljs-keyword">if</span> (data.<span class="hljs-property">code</span> === <span class="hljs-number">0</span>) &#123;<br>      <span class="hljs-keyword">return</span> data.<span class="hljs-property">data</span>;<br>    &#125;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&quot;request error&quot;</span>, data);<br>    <span class="hljs-keyword">return</span> response.<span class="hljs-property">data</span>;<br>  &#125;,<br>  <span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>    <span class="hljs-comment">// 超出 2xx 范围的状态码都会触发该函数。</span><br>    <span class="hljs-comment">// 对响应错误做点什么</span><br>    <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(error);<br>  &#125;<br>);<br><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> instance;<br></code></pre></td></tr></table></figure>

<h3 id="路由嵌套"><a href="#路由嵌套" class="headerlink" title="路由嵌套"></a>路由嵌套</h3><ul>
<li><h5 id="app-vue中如此配置：（2023-08-27早）"><a href="#app-vue中如此配置：（2023-08-27早）" class="headerlink" title="app.vue中如此配置：（2023/08/27早）"></a>app.vue中如此配置：（2023/08/27早）</h5></li>
</ul>
<figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs apache"><span class="hljs-section">&lt;template&gt;</span><br>  <span class="hljs-section">&lt;router-view/&gt;</span><br><span class="hljs-section">&lt;/template&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>这里解释一下：</li>
</ul>
<figure class="highlight autohotkey"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs autohotkey">在Ant Design Vue中，App.vue是项目的根组件，是所有页面组件的父容器。在这段代码中，`&lt;router-view/&gt;`是一个特殊的组件标签，它用于显示路由器（router）根据当前路由匹配的页面组件。<br><br>`&lt;router-view/&gt;`是Vue Router提供的一个占位符标签，它会根据当前的URL路径匹配到的路由，动态地渲染对应的组件内容。<br><br>具体来说，当用户访问不同的URL路径时，Vue Router会根据定义的路由规则来确定显示哪个组件。然后，这个组件会被动态地渲染到App.vue中的`&lt;router-view/&gt;`标签中。<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="比如说当前URL中的path路径为：-about"><a href="#比如说当前URL中的path路径为：-about" class="headerlink" title="比如说当前URL中的path路径为：/about"></a>比如说当前URL中的path路径为：/about</h5></li>
<li><p>而我们配置的路由中：</p>
</li>
</ul>
<figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs pgsql">&#123;<br>  <span class="hljs-type">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>,<br>  <span class="hljs-type">name</span>: <span class="hljs-string">&#x27;about&#x27;</span>,<br>  component: () =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="hljs-string">&#x27;../views/AboutView.vue&#x27;</span>)<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="那么就会展示-about下的组件内容了"><a href="#那么就会展示-about下的组件内容了" class="headerlink" title="那么就会展示/about下的组件内容了"></a>那么就会展示/about下的组件内容了</h5></li>
<li><p>我在主页面中引入了标签页组件：</p>
</li>
</ul>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-comment">&lt;!--标签页--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a-tabs</span> <span class="hljs-attr">v-model:activeKey</span>=<span class="hljs-string">&quot;activeKey&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">a-tab-pane</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;文章&quot;</span> <span class="hljs-attr">tab</span>=<span class="hljs-string">&quot;文章&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">PostList</span> <span class="hljs-attr">:post-list</span>=<span class="hljs-string">&quot;postList&quot;</span>/&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">a-tab-pane</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;<span class="hljs-name">a-tab-pane</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;图片&quot;</span> <span class="hljs-attr">tab</span>=<span class="hljs-string">&quot;图片&quot;</span>&gt;</span><br>    图片<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">a-tab-pane</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;<span class="hljs-name">a-tab-pane</span> <span class="hljs-attr">key</span>=<span class="hljs-string">&quot;用户&quot;</span> <span class="hljs-attr">tab</span>=<span class="hljs-string">&quot;用户&quot;</span>&gt;</span><br>    用户<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">a-tab-pane</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">a-tabs</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="可以看到在tab栏下，我引入了PostList组件，并传入了postList参数"><a href="#可以看到在tab栏下，我引入了PostList组件，并传入了postList参数" class="headerlink" title="可以看到在tab栏下，我引入了PostList组件，并传入了postList参数"></a>可以看到在tab栏下，我引入了PostList组件，并传入了postList参数</h5></li>
<li><h5 id="那么PostList组件就会展示在该标签栏下，效果如下：（2023-08-27早）"><a href="#那么PostList组件就会展示在该标签栏下，效果如下：（2023-08-27早）" class="headerlink" title="那么PostList组件就会展示在该标签栏下，效果如下：（2023/08/27早）"></a>那么PostList组件就会展示在该标签栏下，效果如下：（2023/08/27早）</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230826215450284.png" alt="image-20230826215450284"></p>
<h3 id="子页面嵌套"><a href="#子页面嵌套" class="headerlink" title="子页面嵌套"></a>子页面嵌套</h3><ul>
<li>纠正以下上面说明的页面组件的嵌套方法，正确的嵌套方法应该是这样的：</li>
<li>在index页面下引入子组件：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs ts">&lt;script lang=<span class="hljs-string">&quot;ts&quot;</span> setup=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">UserListPage</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/components/userListPage.vue&quot;</span>;<br><br>.......................<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>子组件编写如下（<strong>注意导出参数name</strong>）：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    嘿嘿嘿<br>  &lt;/div&gt;<br>&lt;/template&gt;<br><br>&lt;script&gt;<br>export default &#123;<br>  name: &quot;UserListPage&quot;<br>&#125;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>直接如此引用子组件（<strong>还可传递参数</strong>，可参考上面 <strong>路由嵌套</strong> 的实现方法）</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;a-tab-pane key=&quot;1&quot; tab=&quot;用户列表&quot;&gt;<br>             在线用户列表<br>             &lt;UserListPage/&gt;<br>           &lt;/a-tab-pane&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>那么子页面如何获取传递的参数呢？</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;a-list<br>          item-layout=&quot;horizontal&quot;<br>          :grid=&quot;&#123; gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 6 &#125;&quot;<br>          :data-source=&quot;props.userInfoList&quot;<br>      &gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs ts">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123;withDefaults, defineProps&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;<br><br><span class="hljs-keyword">interface</span> <span class="hljs-title class_">Props</span> &#123;<br>  <span class="hljs-attr">userInfoList</span>: <span class="hljs-built_in">any</span>[];<br>&#125;<br><br><span class="hljs-keyword">const</span> props = <span class="hljs-title function_">withDefaults</span>(defineProps&lt;<span class="hljs-title class_">Props</span>&gt;(), &#123;<br>  <span class="hljs-attr">userInfoList</span>: <span class="hljs-function">() =&gt;</span> [],<br>  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;UserListPage&quot;</span><br>&#125;)<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="完成，页面显示如下，子组件已成功显示在index页面中："><a href="#完成，页面显示如下，子组件已成功显示在index页面中：" class="headerlink" title="完成，页面显示如下，子组件已成功显示在index页面中："></a>完成，页面显示如下，子组件已成功显示在index页面中：</h5></li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230909175611698.png" alt="image-20230909175611698"></p>
<h3 id="配置启动端口-1"><a href="#配置启动端口-1" class="headerlink" title="配置启动端口"></a>配置启动端口</h3><ul>
<li><h5 id="在-vue-config-js-下，进行如下配置：（2023-09-09午）"><a href="#在-vue-config-js-下，进行如下配置：（2023-09-09午）" class="headerlink" title="在 vue.config.js 下，进行如下配置：（2023/09/09午）"></a>在 vue.config.js 下，进行如下配置：（2023/09/09午）</h5></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> &#123; defineConfig &#125; = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;@vue/cli-service&#x27;</span>)<br><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = <span class="hljs-title function_">defineConfig</span>(&#123;<br>  <span class="hljs-attr">transpileDependencies</span>: <span class="hljs-literal">true</span>,<br>  <span class="hljs-attr">devServer</span>: &#123;<br>    <span class="hljs-attr">port</span>: <span class="hljs-number">7071</span><br>  &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h3><ul>
<li>做登录页面时，一个简单的表单和数据双向绑定搞了半天，这里直接给出代码示例了：（2023/09/10午）</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;a-form @submit=&quot;handleSubmit&quot;&gt;<br>        &lt;a-form-item label=&quot;用户名&quot; name=&quot;username&quot;<br>                     :rules=&quot;[&#123; required: true, message: &#x27;请输入用户名&#x27; &#125;]&quot;&gt;<br>          &lt;a-input :placeholder=&quot;&#x27;请输入用户名&#x27;&quot; v-model:value=&quot;userAccount&quot;/&gt;<br>        &lt;/a-form-item&gt;<br><br>        &lt;a-form-item label=&quot;密码&quot; name=&quot;userPassword&quot;<br>                     :rules=&quot;[&#123; required: true, message: &#x27;请输入密码&#x27; &#125;]&quot;&gt;<br>          &lt;a-input :type=&quot;&#x27;password&#x27;&quot; :placeholder=&quot;&#x27;请输入密码&#x27;&quot; v-model:value=&quot;userPassword&quot;<br>          /&gt;<br>        &lt;/a-form-item&gt;<br><br>        &lt;a-form-item&gt;<br>          &lt;a-button type=&quot;primary&quot; html-type=&quot;submit&quot;&gt;登录&lt;/a-button&gt;<br>        &lt;/a-form-item&gt;<br>      &lt;/a-form&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 用户名 密码</span><br><span class="hljs-keyword">const</span> userAccount = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><span class="hljs-keyword">const</span> userPassword = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><br><span class="hljs-comment">// 登录请求</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleSubmit</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-title class_">MyAxios</span>.<span class="hljs-title function_">post</span>(<span class="hljs-string">&quot;/user/login&quot;</span>, &#123;<br>    <span class="hljs-attr">userAccount</span>: userAccount.<span class="hljs-property">value</span>,<br>    <span class="hljs-attr">userPassword</span>: userPassword.<span class="hljs-property">value</span>,<br>  &#125;)<br>      .<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">values</span>) =&gt;</span> &#123;<br>        <span class="hljs-comment">// 处理表单提交逻辑</span><br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;表单数据：&#x27;</span>, values);<br>      &#125;)<br>      .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;表单验证失败：&#x27;</span>, error);<br>      &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<h3 id="日常犯傻"><a href="#日常犯傻" class="headerlink" title="日常犯傻"></a>日常犯傻</h3><ul>
<li><h5 id="使用-Vue-的-ref-语法时，容易忘记取-value（2023-09-13晚）"><a href="#使用-Vue-的-ref-语法时，容易忘记取-value（2023-09-13晚）" class="headerlink" title="使用 Vue 的 ref() 语法时，容易忘记取.value（2023/09/13晚）"></a>使用 Vue 的 ref() 语法时，容易忘记取.value（2023/09/13晚）</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> currentUserId = currentUser.<span class="hljs-property">value</span>.<span class="hljs-property">id</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="访问后端服务器路径，容易忘记写-api"><a href="#访问后端服务器路径，容易忘记写-api" class="headerlink" title="访问后端服务器路径，容易忘记写/api"></a>访问后端服务器路径，容易忘记写/api</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> socketUrl = <span class="hljs-string">`ws://localhost:8081/api/websocket/<span class="hljs-subst">$&#123;currentUserId&#125;</span>`</span>;<br></code></pre></td></tr></table></figure>

<h3 id="处理JSON字符串"><a href="#处理JSON字符串" class="headerlink" title="处理JSON字符串"></a>处理JSON字符串</h3><ul>
<li><h5 id="前台获取服务器转发的消息后，需要解析出接收者，再判断接收者是否为当前用户，是则为该用户展示具体消息（2023-09-14晚）"><a href="#前台获取服务器转发的消息后，需要解析出接收者，再判断接收者是否为当前用户，是则为该用户展示具体消息（2023-09-14晚）" class="headerlink" title="前台获取服务器转发的消息后，需要解析出接收者，再判断接收者是否为当前用户，是则为该用户展示具体消息（2023/09/14晚）"></a>前台获取服务器转发的消息后，需要解析出接收者，再判断接收者是否为当前用户，是则为该用户展示具体消息（2023/09/14晚）</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">//获得消息事件(获得服务端转发的消息)</span><br>    socket.<span class="hljs-property">onmessage</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">msg</span>) &#123;<br>        <span class="hljs-comment">// 封装返回消息</span><br>      receiveMsg.<span class="hljs-property">value</span> = msg.<span class="hljs-property">data</span>;<br>      <span class="hljs-comment">// 解构</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;这条消息是发给: &quot;</span> + receiveMsg.<span class="hljs-property">value</span> + <span class="hljs-string">&quot; 的&quot;</span>)<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;这条消息是发给: &quot;</span> + receiveMsg.<span class="hljs-property">value</span>.<span class="hljs-property">receiverId</span> + <span class="hljs-string">&quot; 的&quot;</span>)<br>      <span class="hljs-keyword">const</span> content = receiveMsg.<span class="hljs-property">value</span>.<span class="hljs-property">content</span>;<br>      <span class="hljs-comment">// 是否属于我的消息</span><br>      <span class="hljs-keyword">if</span> (receiverId === currentUserId) &#123;<br>        <span class="hljs-title function_">setMessage</span>(<span class="hljs-string">&quot;服务端回应: &quot;</span> + content + <span class="hljs-string">&quot;发给: &quot;</span> + receiverId);<br>      &#125;<br>    &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>前端返回的 mes 是 JSON字符串，我看见控制台输出的内容是，以为<strong>是个对象</strong>，结果取到的属性值是undefined：</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-punctuation">&#123;</span><span class="hljs-attr">&quot;senderId&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-string">&quot;1657284783190523906&quot;</span><span class="hljs-punctuation">,</span><span class="hljs-attr">&quot;receiverId&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-string">&quot;1657284893320364034&quot;</span><span class="hljs-punctuation">,</span><span class="hljs-attr">&quot;content&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-string">&quot;阿发&quot;</span><span class="hljs-punctuation">,</span><span class="hljs-attr">&quot;sendTime&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-string">&quot;2023-09-14T13:29:11.309Z&quot;</span><span class="hljs-punctuation">&#125;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>调试了半天，检查了下 mes 的类型，才发现是个<strong>JSON字符串</strong>，奶奶的</li>
</ul>
<figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs arcade"><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">&quot;type of &quot;</span> + <span class="hljs-built_in">typeof</span> (receiveMsg.value))<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="所以要将msg-JSON字符串解析为对象后，才可以正常拿到属性值"><a href="#所以要将msg-JSON字符串解析为对象后，才可以正常拿到属性值" class="headerlink" title="所以要将msg JSON字符串解析为对象后，才可以正常拿到属性值"></a>所以要将msg JSON字符串解析为对象后，才可以正常拿到属性值</h5></li>
</ul>
<figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ini"><span class="hljs-attr">receiveMsg.value</span> = JSON.parse(msg.data)<span class="hljs-comment">;</span><br></code></pre></td></tr></table></figure>

<ul>
<li><p>但是连接服务器socket时，也会执行这里的代码，而<strong>服务器首次响应连接请求并传回的的参数类型</strong>却<strong>不是JSON字符串</strong></p>
</li>
<li><h5 id="解析失败，报以下错误："><a href="#解析失败，报以下错误：" class="headerlink" title="解析失败，报以下错误："></a>解析失败，报以下错误：</h5></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20230914214515079.png" alt="image-20230914214515079"></p>
<ul>
<li>最后优化代码，同时处理两种情况：服务器首次连接成功后的响应（<strong>普通字符串</strong>） / 服务器转发的消息（<strong>JSON字符串</strong>）</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">//获得消息事件(获得服务端转发的消息)</span><br>    socket.<span class="hljs-property">onmessage</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">msg</span>) &#123;<br>      <span class="hljs-comment">// 封装返回消息</span><br>      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> (msg) === <span class="hljs-title class_">String</span>) &#123;<br>        receiveMsg.<span class="hljs-property">value</span> = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(msg.<span class="hljs-property">data</span>);<br>      &#125;<br>      receiveMsg.<span class="hljs-property">value</span> = msg.<span class="hljs-property">data</span>;<br>      <span class="hljs-comment">// 解构</span><br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;这条消息是发给: &quot;</span> + receiveMsg.<span class="hljs-property">value</span>.<span class="hljs-property">receiverId</span> + <span class="hljs-string">&quot; 的&quot;</span>)<br>      <span class="hljs-keyword">const</span> content = receiveMsg.<span class="hljs-property">value</span>.<span class="hljs-property">content</span>;<br>      <span class="hljs-comment">// 是否属于我的消息</span><br>      <span class="hljs-keyword">if</span> (receiverId === currentUserId) &#123;<br>        <span class="hljs-title function_">setMessage</span>(<span class="hljs-string">&quot;服务端回应: &quot;</span> + content + <span class="hljs-string">&quot;发给: &quot;</span> + receiverId);<br>      &#125;<br>    &#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="各种坑都能踩到，不过好在花点时间排错，都能解决掉-👏👏👏（2023-09-14晚）"><a href="#各种坑都能踩到，不过好在花点时间排错，都能解决掉-👏👏👏（2023-09-14晚）" class="headerlink" title="各种坑都能踩到，不过好在花点时间排错，都能解决掉 👏👏👏（2023/09/14晚）"></a>各种坑都能踩到，不过好在花点时间排错，都能解决掉 👏👏👏（2023/09/14晚）</h5></li>
</ul>
<h3 id="页面路由跳转（2）"><a href="#页面路由跳转（2）" class="headerlink" title="页面路由跳转（2）"></a>页面路由跳转（2）</h3><ul>
<li><p>在 Vue 中如何实现路由跳转？使用 <strong>umi/router</strong> 组件 </p>
</li>
<li><h5 id="Vue-Router-和-组合式-API-Vue-Router-vuejs-org"><a href="#Vue-Router-和-组合式-API-Vue-Router-vuejs-org" class="headerlink" title="Vue Router 和 组合式 API | Vue Router (vuejs.org)"></a><a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/advanced/composition-api.html">Vue Router 和 组合式 API | Vue Router (vuejs.org)</a></h5></li>
<li><h5 id="快速记录一下：（2023-09-16早）"><a href="#快速记录一下：（2023-09-16早）" class="headerlink" title="快速记录一下：（2023/09/16早）"></a>快速记录一下：（2023/09/16早）</h5></li>
<li><p>我们之前配置过的页面路由是这样的：</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs ts">&#123;<br>      <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/chat&#x27;</span>,<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;chat&#x27;</span>,<br>      <span class="hljs-attr">component</span>: <span class="hljs-function">() =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="hljs-string">&#x27;../pages/chatPage.vue&#x27;</span>)<br>  &#125;,<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="包含path（页面路由）、name（页面别名）、component（页面展示组件）"><a href="#包含path（页面路由）、name（页面别名）、component（页面展示组件）" class="headerlink" title="包含path（页面路由）、name（页面别名）、component（页面展示组件）"></a>包含path（页面路由）、name（页面别名）、component（页面展示组件）</h5></li>
<li><p>那么我们可以如此实现<strong>精准的页面跳转</strong>和参数传递：</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/router&quot;</span>;<br><br>router.<span class="hljs-title function_">push</span>(&#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;chat&quot;</span>,<br>    <span class="hljs-attr">path</span>:<span class="hljs-string">&quot;/chat&quot;</span>,<br>    <span class="hljs-attr">query</span>: &#123;<br>      <span class="hljs-attr">chatUserId</span>:<span class="hljs-number">12345</span><br>    &#125;,<br>    <span class="hljs-attr">params</span>:&#123;<br>      <span class="hljs-attr">id</span>:<span class="hljs-string">&quot;12345&quot;</span><br>    &#125;<br>  &#125;)<br></code></pre></td></tr></table></figure>

<ul>
<li>也可以简单的<strong>改变当前页面的路由参数</strong>，而不进<strong>行页面跳转</strong>：（<strong>适用于 Tab 页之间切换时，标记 tab页</strong>）</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/router&quot;</span>;<br><br>router.<span class="hljs-title function_">push</span>(&#123;<br>   <span class="hljs-attr">query</span>: &#123;<br>     <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;abab&quot;</span><br>   &#125;<br> &#125;)<br></code></pre></td></tr></table></figure>

<ul>
<li>那么跳转过去的页面该如何获取<strong>当前页面的路由地址</strong>、<strong>携带的参数</strong>等信息呢？<strong>引入Vue Router组件</strong>：（2023/09/16早）</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> &#123;useRoute&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue-router&#x27;</span>;<br><br><span class="hljs-keyword">const</span> route = <span class="hljs-title function_">useRoute</span>();<br><span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;携带参数:&#x27;</span>, route.<span class="hljs-property">query</span>)<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;路由地址:&#x27;</span>, route.<span class="hljs-property">path</span>)<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;传递参数:&#x27;</span>, route.<span class="hljs-property">params</span>)<br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="动态新增tab标签页"><a href="#动态新增tab标签页" class="headerlink" title="动态新增tab标签页"></a>动态新增tab标签页</h3><ul>
<li>这是一个很有意思的实现，浅浅记录一下：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs ts">&lt;a-tabs v-<span class="hljs-attr">model</span>:activeKey=<span class="hljs-string">&quot;activeKey&quot;</span> tab-position=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-meta">@change</span>=<span class="hljs-string">&quot;handleTabChange&quot;</span>&gt;<br>     <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">a-tab-pane</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">&quot;tab in tabs&quot;</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">&quot;tab.key&quot;</span> <span class="hljs-attr">:tab</span>=<span class="hljs-string">&quot;tab.tab.chatTabName&quot;</span>&gt;</span></span><br><span class="language-xml">       <span class="hljs-comment">&lt;!-- 在这里放置标签页内容 --&gt;</span></span><br><span class="language-xml">       &#123;&#123; tab.content &#125;&#125;</span><br><span class="language-xml">     <span class="hljs-tag">&lt;/<span class="hljs-name">a-tab-pane</span>&gt;</span></span><br>&lt;/a-tabs&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 钩子函数</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>  <span class="hljs-title function_">addTab</span>();<br>&#125;)<br><span class="hljs-comment">// 动态添加tab标签页</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">addTab</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  chatTabName.<span class="hljs-property">value</span> = route.<span class="hljs-property">query</span><br>  <span class="hljs-keyword">const</span> newTab = &#123;<br>    <span class="hljs-attr">key</span>: <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>().<span class="hljs-title function_">toString</span>(), <span class="hljs-comment">// 每个标签页都需要一个唯一的 key</span><br>    <span class="hljs-attr">tab</span>: chatTabName.<span class="hljs-property">value</span>,<br>    <span class="hljs-attr">content</span>: <span class="hljs-string">&#x27;新标签页内容&#x27;</span>,<br>  &#125;;<br><br>  tabs.<span class="hljs-property">value</span>.<span class="hljs-title function_">push</span>(newTab);<br>  activeKey.<span class="hljs-property">value</span> = newTab.<span class="hljs-property">key</span>; <span class="hljs-comment">// 新增的标签页设为激活状态</span><br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="这样就轻松实现了（MemoryChat开放过程中的废弃想法-）（2023-09-16午）"><a href="#这样就轻松实现了（MemoryChat开放过程中的废弃想法-）（2023-09-16午）" class="headerlink" title="这样就轻松实现了（MemoryChat开放过程中的废弃想法 ）（2023/09/16午）"></a>这样就轻松实现了（MemoryChat开放过程中的废弃想法 ）（2023/09/16午）</h5></li>
</ul>
<h3 id="icon图标的使用"><a href="#icon图标的使用" class="headerlink" title="icon图标的使用"></a>icon图标的使用</h3><ul>
<li><h5 id="看官网，首先下载安装相关依赖：（2023-09-17晚）"><a href="#看官网，首先下载安装相关依赖：（2023-09-17晚）" class="headerlink" title="看官网，首先下载安装相关依赖：（2023/09/17晚）"></a>看官网，首先下载安装相关依赖：（2023/09/17晚）</h5></li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> install --save @ant-design/icons-vue<br></code></pre></td></tr></table></figure>

<ul>
<li><strong>引入相关 icon图标 组件</strong>（这步操作，，WebStorm是不会自动给你引入这个组件的，怪不得我 tab标签页 的页面图标不显示，一个星期都没解决掉，这编译器害人不浅）</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">StarOutlined</span>, <span class="hljs-title class_">StarFilled</span>, <span class="hljs-title class_">StarTwoTone</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@ant-design/icons-vue&#x27;</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="直接在页面中用就行了，效果如下："><a href="#直接在页面中用就行了，效果如下：" class="headerlink" title="直接在页面中用就行了，效果如下："></a>直接在页面中用就行了，效果如下：</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;div&gt;<br>         &lt;StarOutlined /&gt;<br>         &lt;StarFilled /&gt;<br>         &lt;StarTwoTone twoToneColor=&quot;#eb2f96&quot; /&gt;<br>       &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230918190908215.png" alt="image-20230918190908215"></p>
<h3 id="监听选中的Tab标签页"><a href="#监听选中的Tab标签页" class="headerlink" title="监听选中的Tab标签页"></a>监听选中的Tab标签页</h3><ul>
<li>我们选中Tab标签页后，如果绑定了activeKey，就会将该Tab页的Key值，给到activeKey</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;a-tab-pane v-model:activeKey=&quot;activeKey&quot; v-for=&quot;tab in friendList&quot; :key=&quot;tab.id&quot; :tab=&quot;tab.username&quot;<br>                     @click=&quot;handleTabChange&quot;&gt;<br>      .........................     <br>   &lt;/a-tab-pane&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// tab页 key</span><br><span class="hljs-keyword">const</span> activeKey = <span class="hljs-title function_">ref</span>(currentUserId);<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="即，通过选中标签页的动作，就能拿到该Tab标签页的key值"><a href="#即，通过选中标签页的动作，就能拿到该Tab标签页的key值" class="headerlink" title="即，通过选中标签页的动作，就能拿到该Tab标签页的key值"></a>即，通过选中标签页的动作，就能拿到该Tab标签页的key值</h5></li>
<li><p>那么当页面刷新后，仍然会执行这个代码，初始化activeKey的值：</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">const</span> activeKey = <span class="hljs-title function_">ref</span>(currentUserId);<br></code></pre></td></tr></table></figure>

<ul>
<li>我们现在要实现：刷新页面后，仍然选中刚才选中的Tab标签页，即activeKey值需要更新，更新为刚才的key值</li>
<li>但是，当页面刷新后activeKey的值就丢失了，所以我们要<strong>对active进行监听</strong>，随时保存它的值，如下：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 监听 activeKey 的变化，更新存储中的值</span><br><span class="hljs-title function_">watch</span>(activeKey, <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> &#123;<br>  <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">setItem</span>(<span class="hljs-string">&#x27;activeKey&#x27;</span>, value);<br>&#125;);<br></code></pre></td></tr></table></figure>

<ul>
<li><p>这里踩了个<strong>坑</strong>，监听的值一定是<strong>activeKey</strong>，而不是<strong>activeKey.value</strong>，即监听的变量是<strong>响应式变量</strong> <strong>（2023/09/20晚）</strong></p>
</li>
<li><p>那么在页面刷新之后，我们就可以拿到<strong>localStorage中存储的key值</strong>，保持选中刚才的Tab页面</p>
</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 钩子函数</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>........................<br><br>  activeKey.<span class="hljs-property">value</span> = <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">getItem</span>(<span class="hljs-string">&#x27;activeKey&#x27;</span>)<br>.....................<br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="点击跳转不同的页面"><a href="#点击跳转不同的页面" class="headerlink" title="点击跳转不同的页面"></a>点击跳转不同的页面</h3><ul>
<li><h5 id="我要讲什么呢，好像还没说清楚，但我举个例子就好理解了"><a href="#我要讲什么呢，好像还没说清楚，但我举个例子就好理解了" class="headerlink" title="我要讲什么呢，好像还没说清楚，但我举个例子就好理解了"></a>我要讲什么呢，好像还没说清楚，但我举个例子就好理解了</h5></li>
<li><p>我最近要实现这样的功能：点击博文，跳转到该博文的详情页</p>
<ul>
<li>这样的需求很常见，掘金、CSDN等博客网站都是这样，甚至说所有的文档网站都是这样吧</li>
<li>要点就这几个：跳转前拿到该博文id，跳转页面时携带id，对应页面解析拿到该id从数据库中查询数据</li>
<li>这就是最简单的实现方式了</li>
</ul>
</li>
<li><h5 id="跳转前拿到该博文id"><a href="#跳转前拿到该博文id" class="headerlink" title="跳转前拿到该博文id"></a>跳转前拿到该博文id</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;!--博文--&gt;<br>&lt;a-card hoverable @click=&quot;goToRead(item.id)&quot;&gt;<br>   ......................<br>&lt;/a-card&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="跳转页面时携带id"><a href="#跳转页面时携带id" class="headerlink" title="跳转页面时携带id"></a>跳转页面时携带id</h5></li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 跳转博文详情页</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">goToRead</span> = (<span class="hljs-params">id: <span class="hljs-built_in">never</span></span>) =&gt; &#123;<br>  <span class="hljs-comment">// router.push(`/blog/read/$&#123;id&#125;`)</span><br>  router.<span class="hljs-title function_">push</span>(&#123;<br>    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;blogRead&quot;</span>,<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&quot;/blog/read&quot;</span>,<br>    <span class="hljs-attr">query</span>: &#123;<br>      <span class="hljs-attr">articleId</span>: id<br>    &#125;<br>  &#125;)<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="对应页面解析拿到该id从数据库中查询数据"><a href="#对应页面解析拿到该id从数据库中查询数据" class="headerlink" title="对应页面解析拿到该id从数据库中查询数据"></a>对应页面解析拿到该id从数据库中查询数据</h5></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div class=&quot;blog&quot;&gt;<br>    &#123;&#123;articleId&#125;&#125;<br>  &lt;/div&gt;<br>&lt;/template&gt;<br><br>&lt;script lang=&quot;ts&quot; setup=&quot;ts&quot;&gt;<br>import &#123;useRoute&#125; from &#x27;vue-router&#x27;;<br>import &#123;ref&#125; from &quot;vue&quot;;<br><br>const route = useRoute();<br>const articleId = ref();<br>// 获取id值<br>articleId.value = route.query.articleId;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><h5 id="就这样简单地记录下思路吧（2023-09-24午）"><a href="#就这样简单地记录下思路吧（2023-09-24午）" class="headerlink" title="就这样简单地记录下思路吧（2023/09/24午）"></a>就这样简单地记录下思路吧（2023/09/24午）</h5></li>
</ul>
<h3 id="网页中支持Markdown语法写博客"><a href="#网页中支持Markdown语法写博客" class="headerlink" title="网页中支持Markdown语法写博客"></a>网页中支持Markdown语法写博客</h3><ul>
<li><h5 id="要在博客网站中支持Markdown语法写博客并展示，你可以使用第三方的Markdown解析库来解析Markdown文本，并将解析后的内容展示在网页上（2023-09-24晚）"><a href="#要在博客网站中支持Markdown语法写博客并展示，你可以使用第三方的Markdown解析库来解析Markdown文本，并将解析后的内容展示在网页上（2023-09-24晚）" class="headerlink" title="要在博客网站中支持Markdown语法写博客并展示，你可以使用第三方的Markdown解析库来解析Markdown文本，并将解析后的内容展示在网页上（2023/09/24晚）"></a>要在博客网站中支持Markdown语法写博客并展示，你可以使用第三方的Markdown解析库来解析Markdown文本，并将解析后的内容展示在网页上（2023/09/24晚）</h5></li>
<li><p>首先，你需要引入一个适用于Vue的Markdown解析库，例如<code>markdown-it</code>。可以通过NPM安装该库：</p>
</li>
</ul>
<figure class="highlight livescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs livescript"><span class="hljs-built_in">npm</span> install markdown-<span class="hljs-literal">it</span><br></code></pre></td></tr></table></figure>

<ul>
<li>然后，在你的组件中，你可以导入并实例化<code>markdown-it</code>，将Markdown文本作为输入，使用<code>.render()</code>方法将其转换为HTML并展示在网页上</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">import</span> <span class="hljs-title class_">MarkdownIt</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdown-it&#x27;</span>;<br><br><span class="hljs-comment">// Markdown语法</span><br><span class="hljs-keyword">const</span> parsedContent = <span class="hljs-title function_">ref</span>()<br><span class="hljs-keyword">const</span> md = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MarkdownIt</span>();<br><span class="hljs-comment">// 使用Markdown语法接收文章内容</span><br>parsedContent.<span class="hljs-property">value</span> = md.<span class="hljs-title function_">render</span>(articleInfo.<span class="hljs-property">value</span>.<span class="hljs-property">content</span>);<br></code></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;div v-html=&quot;parsedContent&quot;<br>      style=&quot;position: absolute; margin-left: 10px; margin-right: 10px; margin-top: 20px;&quot;&gt;<br> &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li><p>在上面的示例代码中，我们导入了<code>markdown-it</code>库</p>
<ul>
<li>然后在<code>mounted</code>钩子中实例化了<code>MarkdownIt</code>对象</li>
<li>并将Markdown文本<code>this.articleInfo.content</code>传递给其<code>.render()</code>方法来解析为HTML并赋值给<code>parsedContent</code></li>
<li>然后我们使用<code>v-html</code>指令将解析后的内容展示在网页上。</li>
</ul>
</li>
<li><h5 id="这样，无论用户使用Markdown语法还是普通的HTML编写博客内容，页面都会正确展示"><a href="#这样，无论用户使用Markdown语法还是普通的HTML编写博客内容，页面都会正确展示" class="headerlink" title="这样，无论用户使用Markdown语法还是普通的HTML编写博客内容，页面都会正确展示"></a>这样，无论用户使用Markdown语法还是普通的HTML编写博客内容，页面都会正确展示</h5></li>
<li><p>最终效果：</p>
</li>
</ul>
<p><img src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230924235124466.png" alt="image-20230924235124466"></p>
<h3 id="子组件绑定自己独有的属性"><a href="#子组件绑定自己独有的属性" class="headerlink" title="子组件绑定自己独有的属性"></a>子组件绑定自己独有的属性</h3><ul>
<li><p>鬼知道这个标题是什么意思，我简单介绍下：</p>
<ul>
<li>最近在实现<strong>点击队伍，编辑并发布公告的功能</strong>，要求点击队伍后，只有该队伍对应的窗口会弹窗</li>
<li>这就需要每个队伍中，都封装一个控制弹窗出现的变量</li>
<li>我们当然不能在后端封装这个字段了，所以需要在前端做处理</li>
</ul>
</li>
<li><h5 id="完善昨晚的队伍发布公告，遇到了些许小问题："><a href="#完善昨晚的队伍发布公告，遇到了些许小问题：" class="headerlink" title="完善昨晚的队伍发布公告，遇到了些许小问题："></a>完善昨晚的队伍发布公告，遇到了些许小问题：</h5><ul>
<li>由于编辑公告的弹窗是写在list列表中的，即每个team都有自己的公告弹窗，所以不应该使用一个变量来控制弹窗的出现/消失：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 弹窗</span><br><span class="hljs-keyword">const</span> visible = ref&lt;<span class="hljs-built_in">boolean</span>&gt;(<span class="hljs-literal">false</span>);<br><span class="hljs-comment">// 展示弹窗</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">showModal</span> = (<span class="hljs-params">team: <span class="hljs-built_in">any</span></span>) =&gt; &#123;<br>  visible.<span class="hljs-property">value</span> = <span class="hljs-literal">true</span>;<br>&#125;;<br></code></pre></td></tr></table></figure>

<ul>
<li>而应该为每个team，都分配独有的控制弹窗出现的变量（<strong>showEditWindow</strong>）：</li>
</ul>
<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs ts">myAxios.<span class="hljs-title function_">get</span>(<span class="hljs-string">&quot;/team/created&quot;</span>, &#123;<br>    <span class="hljs-attr">params</span>: &#123;<br>      <span class="hljs-string">&quot;loginUserId&quot;</span>: userId<br>    &#125;<br>  &#125;).<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> &#123;<br>    createdTeamList.<span class="hljs-property">value</span> = res.<span class="hljs-property">data</span>.<span class="hljs-property">records</span>.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">team: <span class="hljs-built_in">any</span></span>) =&gt;</span> &#123;<br>      <span class="hljs-keyword">return</span> &#123;<br>        ...team,<br>        <span class="hljs-attr">showEditWindow</span>: <span class="hljs-literal">false</span><br>      &#125;;<br>    &#125;);<br>  &#125;)<br></code></pre></td></tr></table></figure>

<ul>
<li>为每一个team绑定：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;a-button size=&quot;large&quot; danger @click=&quot;showModal(item)&quot;&gt;发布公告&lt;/a-button&gt;<br>                 &lt;div style=&quot;position: relative&quot;&gt;<br>                   &lt;a-modal v-model:visible=&quot;item.showEditWindow&quot; title=&quot;队伍公告&quot; @ok=&quot;updateAnnouncement(item)&quot;&gt;<br>                     &lt;p&gt;请编辑队伍公告&lt;/p&gt;<br>                     &lt;a-textarea v-model:value=&quot;announcement&quot; style=&quot;height: 100px&quot;/&gt;<br>                   &lt;/a-modal&gt;<br>                 &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">// 公告弹窗</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">showModal</span> = (<span class="hljs-params">team: <span class="hljs-built_in">any</span></span>) =&gt; &#123;<br>  team.<span class="hljs-property">showEditWindow</span> = <span class="hljs-literal">true</span>;<br>&#125;;<br></code></pre></td></tr></table></figure></li>
<li><p>这个思路是普适的，在获取后台传回的数组信息时，为数组内每一个元素都封装自己的独有的元素</p>
</li>
<li><p>在<strong>实现每篇文章的点赞、收藏</strong>，以及<strong>申请加入队伍</strong>中，都是这样的思路<strong>（2023/09/28午）</strong></p>
</li>
</ul>
<h3 id="Eslint-优化导致git代码推送失败"><a href="#Eslint-优化导致git代码推送失败" class="headerlink" title="Eslint 优化导致git代码推送失败"></a>Eslint 优化导致git代码推送失败</h3><ul>
<li>这是我在今晚<strong>推送 Memory API接口开放平台时</strong>遇到的报错。详情看下图： <strong>（2023/10/18晚）</strong></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231018214512698.png" alt="image-20231018214512698"></p>
<ul>
<li>如上图所示，使用 git 推送代码竟然报错了，这是什么原因呢？</li>
<li>我们简单罗列出以上的报错信息：</li>
</ul>
<blockquote>
<p>这些错误和警告是由静态代码分析工具 ESLint 提供的。根据报错信息，您遇到了一些问题：</p>
<ol>
<li><code>File ignored because of a matching ignore pattern. Use &quot;--no-ignore&quot; to override</code>：这是一个警告，意味着某些文件被忽略了，因为它们匹配了 <code>.eslintignore</code> 文件中设定的忽略模式。您可以使用 <code>--no-ignore</code> 参数来覆盖这个忽略，让这些文件被检查。</li>
<li><code>&#39;loading&#39; is assigned a value but never used @typescript-eslint/no-unused-vars</code>：这是一个错误，提示您在 <code>InterfaceInfo/index.tsx</code> 文件中定义了 <code>loading</code> 变量，但是从未使用过。您可以删除没被使用的变量，或者使用变量来解决您需要的逻辑。</li>
<li><code>Missing &quot;key&quot; prop for element in array react/jsx-key</code>：这是两个错误，它们指出在您的组件 <code>InterfaceInfo</code> 的 <code>renderDataSource</code> 方法中，两个元素没有提供 <code>key</code> 属性。React 要求在渲染组件数组时，每个元素都要提供一个唯一的 <code>key</code> 属性，以便在更新列表时进行准确的 diff 操作。您需要为这两个元素添加一个适当的 <code>key</code> 属性。</li>
</ol>
</blockquote>
<ul>
<li><p>所以，这样的报错信息是由<strong>静态代码分析工具 ESLint</strong> 导致的<strong>（2023/10/18晚）</strong></p>
<ul>
<li>我们使用该工具暴露出编码过程中的代码不规范的问题</li>
<li>但是，在推送代码时，这个工具却仍在校验代码的完整性和规范性，</li>
</ul>
</li>
<li><h5 id="在这些代码报错不影响项目运行的前提下，影响了正常的代码提交流程"><a href="#在这些代码报错不影响项目运行的前提下，影响了正常的代码提交流程" class="headerlink" title="在这些代码报错不影响项目运行的前提下，影响了正常的代码提交流程"></a>在这些代码报错不影响项目运行的前提下，影响了正常的代码提交流程</h5></li>
<li><p>解决方法很简单，只需要在 git commit 命令后添加 –no-version ，<strong>绕过 ESLint 工具的代码校验功能</strong>即可（如下）：</p>
</li>
</ul>
<figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs nginx"><span class="hljs-attribute">git</span> commit -m <span class="hljs-string">&quot;接口调用页面优化 接口参数信息 接口文档预开发&quot;</span> --<span class="hljs-literal">no</span>-verify<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231018221051988.png" alt="image-20231018221051988"></p>
<ul>
<li>这里其实还有很多<strong>有关 ESLint 的配置管理</strong>，我就暂时不深究了，日后有机会再展开聊聊</li>
</ul>
<h3 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h3><ul>
<li>导入外部插件时，要选择这个选项，嗖嗖嗖就安装好了（可能这个安装默认是 yarn 的缘故）<strong>（2023/11/11晚）</strong></li>
<li>但是点第一个或者执行以下命令就得卡住好一会儿，还下载安装失败：</li>
</ul>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs cmake">npm <span class="hljs-keyword">install</span> moment<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231111170920323.png" alt="image-20231111170920323"></p>
<h3 id="快速入门-Vue-指南"><a href="#快速入门-Vue-指南" class="headerlink" title="快速入门 Vue 指南"></a>快速入门 Vue 指南</h3><blockquote>
<p>🍖 推荐阅读：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7298927442488442917">写给后端大忙人看的vue入门指南 - 掘金 (juejin.cn)</a></p>
<p>还是非常推荐阅读的，我第一次学 Vue 就是跟着黑马的教程学的，这些操作也都过了一遍的</p>
<p>经常使用<strong>脚手架</strong>（<strong>vite</strong>、<strong>vue/cli</strong> 等）<strong>直接构建 Vue 项目</strong>，很方便很快捷</p>
<p>有时间再实操一遍吧，后端开发人员多了解一些 Vue 还是很有必要的<strong>（2023/11/11晚）</strong></p>
</blockquote>
<h3 id="栅格化布局"><a href="#栅格化布局" class="headerlink" title="栅格化布局"></a>栅格化布局</h3><ul>
<li>简单学习了解了下：<strong>（2023/12/05早）</strong></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;div style=&quot;margin-top: 30px&quot;&gt;<br>    &lt;a-row :gutter=&quot;16&quot;&gt;<br>      &lt;a-col :push=&quot;2&quot; :span=&quot;4&quot;&gt;<br>        &lt;div style=&quot;background-color: #4801&quot;&gt;<br>          dd<br>        &lt;/div&gt;<br>      &lt;/a-col&gt;<br><br>      &lt;a-col :push=&quot;2&quot; :span=&quot;15&quot;&gt;<br>        &lt;div style=&quot;background-color: #4801&quot;&gt;<br>          dd<br>        &lt;/div&gt;<br><br>      &lt;/a-col&gt;<br>    &lt;/a-row&gt;<br>  &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231205120654539.png" alt="image-20231205120654539"></p>
<h3 id="引入外部组件页面"><a href="#引入外部组件页面" class="headerlink" title="引入外部组件页面"></a>引入外部组件页面</h3><ul>
<li>编写 <code>ComprehensiveArticle.vue</code> 页面：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;template&gt;<br>  &lt;div&gt;<br>    综合文章<br>  &lt;/div&gt;<br>&lt;/template&gt;<br><br>&lt;script setup lang=&quot;ts&quot;&gt;<br><br>&lt;/script&gt;<br> <br></code></pre></td></tr></table></figure>

<ul>
<li>在 <code>ArticleList.vue</code> 中导入该页面组件：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;div style=&quot;width: 500px&quot;&gt;<br>   &lt;a-tabs v-model:activeKey=&quot;activeKey&quot; tab-position=&quot;left&quot;&gt;<br>     &lt;a-tab-pane key=&quot;1&quot; tab=&quot;Tab 1&quot;&gt;<br>       &lt;CompreArticleList/&gt;<br>     &lt;/a-tab-pane&gt;<br>     &lt;a-tab-pane key=&quot;2&quot; tab=&quot;Tab 2&quot;&gt;Content of Tab 2&lt;/a-tab-pane&gt;<br>     &lt;a-tab-pane key=&quot;3&quot; tab=&quot;Tab 3&quot;&gt;Content of Tab 3&lt;/a-tab-pane&gt;<br>   &lt;/a-tabs&gt;<br> &lt;/div&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">CompreArticleList</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@/components/CompreArticleList.vue&quot;</span>;<br>.......................<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>导入成功！效果如下：<strong>（2023/12/20晚）</strong></li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231220233126380.png" alt="image-20231220233126380"></p>
<ul>
<li>页面优化完成：（2023/12/21晚）</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231222000308888.png" alt="image-20231222000308888"></p>
<h3 id="引入外部组件页面并传参"><a href="#引入外部组件页面并传参" class="headerlink" title="引入外部组件页面并传参"></a>引入外部组件页面并传参</h3><ul>
<li>外部页面组件 <code>ArticleList</code> 携带参数，参数名为 <code>compreList</code>，参数值为 <code>articleList</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;a-tabs v-model:activeKey=&quot;activeKey&quot; tab-position=&quot;left&quot;&gt;<br>        &lt;a-tab-pane key=&quot;1&quot; tab=&quot;综合&quot;&gt;<br>          &lt;CompreArticleList :compre-list=&quot;articleList&quot;/&gt;<br>        &lt;/a-tab-pane&gt;<br>        &lt;a-tab-pane key=&quot;2&quot; tab=&quot;后端&quot;&gt;<br>        ............................<br> &lt;/a-tabs&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>编写内部组件 <code>CompreArticleList</code>，接收参数 <code>compreList</code>，使用 <code>a-list</code>组件展示</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs vue"> &lt;a-list<br>          class=&quot;demo-loadmore-list&quot;<br>          item-layout=&quot;horizontal&quot;<br>          :data-source=&quot;props.compreList&quot;<br>          style=&quot;width: 400%&quot;<br>      &gt;<br>  ................................<br>&lt;/a-list&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>在 <code>CompreArticleList</code> 下指明接收参数名<strong>（2023/12/22早）</strong></li>
</ul>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;script setup lang=<span class="hljs-string">&quot;ts&quot;</span>&gt;<br><span class="hljs-keyword">import</span> &#123;defineProps, withDefaults&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue/dist/vue&quot;</span>;<br><br>..........................................<br><span class="hljs-keyword">interface</span> <span class="hljs-title class_">Props</span> &#123;<br>  <span class="hljs-attr">compreList</span>: <span class="hljs-built_in">any</span>[];<br>&#125;<br><br><span class="hljs-keyword">const</span> props = <span class="hljs-title function_">withDefaults</span>(defineProps&lt;<span class="hljs-title class_">Props</span>&gt;(), &#123;<br>  <span class="hljs-attr">compreList</span>: <span class="hljs-function">() =&gt;</span> [],<br>&#125;);<br><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="自定义-icon-图标"><a href="#自定义-icon-图标" class="headerlink" title="自定义 icon 图标"></a>自定义 icon 图标</h3><ul>
<li>复制 SVG 代码：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240113231259009.png" alt="image-20240113231259009"></p>
<ul>
<li>引入组件：</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm install --save @ant-design/icons-vue<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Icon</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@ant-design/icons-vue&#x27;</span>;<br></code></pre></td></tr></table></figure>

<ul>
<li>这里推荐阅读：<a target="_blank" rel="noopener" href="https://2x.antdv.com/components/icon-cn#components-icon-demo-custom">Ant Design Vue (antdv.com)</a></li>
<li>添加组件：<strong>（2024/01/13晚）</strong></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;Icon :style=&quot;&#123; color: &#x27;hotpink&#x27;&#125;&quot;&gt;<br>         &lt;template #component&gt;<br>           &lt;svg t=&quot;1705158531565&quot; class=&quot;icon&quot; viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; <br>           	....................................<br>           &lt;/svg&gt;<br>         &lt;/template&gt;<br>       &lt;/Icon&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>完成！效果如下：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240113231553890.png" alt="image-20240113231553890"></p>
<h3 id="组件-textarea-高度动态变化"><a href="#组件-textarea-高度动态变化" class="headerlink" title="组件  textarea 高度动态变化"></a>组件  textarea 高度动态变化</h3><ul>
<li>后台封装返回高度：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-meta">@Data</span><br><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Result</span> &#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 文本框高度</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">private</span> <span class="hljs-type">int</span> height;<br>    <br>    ..................................<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> Result <span class="hljs-title function_">getResultCommon</span><span class="hljs-params">(<span class="hljs-type">double</span> result, <span class="hljs-type">double</span> discount, String resultStr, <span class="hljs-type">int</span> height)</span> &#123;<br>       <span class="hljs-comment">// 根据打着折扣计算最终结果</span><br>       <span class="hljs-type">double</span> <span class="hljs-variable">afterDis</span> <span class="hljs-operator">=</span> result * discount;<br><br>       <span class="hljs-type">Result</span> <span class="hljs-variable">calResult</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Result</span>();<br>       calResult.setBeforeDis(<span class="hljs-number">0.0D</span>);<br>       calResult.setAfterDis(<span class="hljs-number">0.0D</span>);<br>       calResult.setBeforeDis(result);<br>       calResult.setAfterDis(afterDis);<br>       calResult.setProcedure(resultStr);<br>       calResult.setHeight(height);<br><br>       <span class="hljs-keyword">return</span> calResult;<br>   &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>使用 a-textarea 文本框组件，高度随接收参数值 <code>height</code> 动态变化：<strong>（2024/01/14晚）</strong></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs vue">&lt;a-form-item label=&quot;计算过程&quot;&gt;<br>                 &lt;a-textarea v-model:value=&quot;result.procedure&quot;<br>                             placeholder=&quot;Basic usage&quot; :rows=&quot;result.height&quot;<br>                             style=&quot;font-size: medium;font-weight: bold&quot;&gt;<br>                 &lt;/a-textarea&gt;<br>               &lt;/a-form-item&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs tsx"><span class="hljs-keyword">const</span> result = ref&lt;<span class="hljs-title class_">ResultState</span>&gt;(&#123;<br>  <span class="hljs-attr">beforeDis</span>: <span class="hljs-number">0</span>,<br>  <span class="hljs-attr">afterDis</span>: <span class="hljs-number">0</span>,<br>  <span class="hljs-attr">procedure</span>: <span class="hljs-string">&quot;&quot;</span>,<br>  <span class="hljs-attr">height</span>: <span class="hljs-number">5</span><br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="CSS-选择器巩固"><a href="#CSS-选择器巩固" class="headerlink" title="CSS 选择器巩固"></a>CSS 选择器巩固</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 捕获 id = &quot;leftZhankai&quot;</span><br>       <span class="hljs-type">Element</span> <span class="hljs-variable">leftZhankai</span> <span class="hljs-operator">=</span> doc.getElementById(<span class="hljs-string">&quot;leftZhankai&quot;</span>);<br>       <span class="hljs-type">Elements</span> <span class="hljs-variable">heads</span> <span class="hljs-operator">=</span> leftZhankai.select(<span class="hljs-string">&quot;.sons .cont div:nth-of-type(2)&quot;</span>);<br>       <span class="hljs-keyword">for</span> (Element head : heads) &#123;<br>           <span class="hljs-type">Elements</span> <span class="hljs-variable">title</span> <span class="hljs-operator">=</span> head.select(<span class="hljs-string">&quot;&gt;p:nth-of-type(2)&quot;</span>);<br>           <span class="hljs-comment">// Elements author = head.select(&quot;p:nth-of-type(2)&quot;);</span><br>           <span class="hljs-comment">// System.out.println(title.text() + &quot; &quot; + author.text());</span><br>           System.out.println(<span class="hljs-string">&quot;hhh&quot;</span> + title.text());<br>       &#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231112200526767.png" alt="image-20231112200526767"></p>
<ul>
<li>熟悉 <strong>CSS 选择器</strong>之后，<strong>解析 HTML 文档</strong>获取<strong>标题、诗人和内容</strong>就很轻松了：</li>
</ul>
<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20231112202249521.png" alt="image-20231112202249521"></p>
<ul>
<li>存在多个标签，随机选择五个：<strong>（2024/01/16晚）</strong></li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 随机选择五个标签</span><br>List&lt;Element&gt; selectedItems = galleryItem.subList(<span class="hljs-number">0</span>, <span class="hljs-number">5</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li>获取 <code>img</code> 标签的属性：</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-comment">// 打印选中的标签</span><br><span class="hljs-keyword">for</span> (Element item : selectedItems) &#123;<br>	<span class="hljs-type">Elements</span> <span class="hljs-variable">img</span> <span class="hljs-operator">=</span> item.select(<span class="hljs-string">&quot;&gt; a &gt; img&quot;</span>);<br>	<span class="hljs-type">String</span> <span class="hljs-variable">src</span> <span class="hljs-operator">=</span> <span class="hljs-string">&quot;https:&quot;</span> + img.attr(<span class="hljs-string">&quot;data-src&quot;</span>);<br>	<span class="hljs-type">String</span> <span class="hljs-variable">title</span> <span class="hljs-operator">=</span> img.attr(<span class="hljs-string">&quot;title&quot;</span>);<br><br>	<span class="hljs-type">Picture</span> <span class="hljs-variable">picture</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Picture</span>();<br>	picture.setCategory(category);<br>	picture.setTitle(title);<br>	picture.setUrl(src);<br><br>	pictureList.add(picture);<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="MarkDown-编辑器"><a href="#MarkDown-编辑器" class="headerlink" title="MarkDown 编辑器"></a>MarkDown 编辑器</h3><p>官方文档：<a target="_blank" rel="noopener" href="https://github.com/bytedance/bytemd">bytedance/bytemd: ByteMD v1 repository (github.com)</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm i @bytemd/vue-next<br></code></pre></td></tr></table></figure>

<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm i @bytemd/plugin-highlight @bytemd/plugin-gfm<br></code></pre></td></tr></table></figure>

<p>新建 Markdown 编辑器：</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><code class="hljs tsx">&lt;template&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Editor</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">&quot;value&quot;</span> <span class="hljs-attr">:plugins</span>=<span class="hljs-string">&quot;plugins&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;handleChange&quot;</span> /&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">setup</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> gfm <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@bytemd/plugin-gfm&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> highlight <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@bytemd/plugin-highlight&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> &#123; <span class="hljs-title class_">Editor</span> &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@bytemd/vue-next&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">import</span> &#123; withDefaults, defineProps, ref &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">/**</span></span></span><br><span class="hljs-comment"><span class="language-javascript"><span class="language-xml"> * 定义组件属性类型</span></span></span><br><span class="hljs-comment"><span class="language-javascript"><span class="language-xml"> */</span></span></span><br><span class="language-javascript"><span class="language-xml">interface <span class="hljs-title class_">Props</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">value</span>: string;</span></span><br><span class="language-javascript"><span class="language-xml">  mode?: string;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">handleChange</span>: <span class="hljs-function">(<span class="hljs-params">v: string</span>) =&gt;</span> <span class="hljs-keyword">void</span>;</span></span><br><span class="language-javascript"><span class="language-xml">&#125;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> plugins = [</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">gfm</span>(),</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">highlight</span>(),</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// Add more plugins here</span></span></span><br><span class="language-javascript"><span class="language-xml">];</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">/**</span></span></span><br><span class="hljs-comment"><span class="language-javascript"><span class="language-xml"> * 给组件指定初始值</span></span></span><br><span class="hljs-comment"><span class="language-javascript"><span class="language-xml"> */</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// const props = withDefaults(defineProps&lt;Props&gt;(), &#123;</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">//   value: () =&gt; &quot;&quot;,</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">//   mode: () =&gt; &quot;split&quot;,</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">//   handleChange: (v: string) =&gt; &#123;</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">//     console.log(v);</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">//   &#125;,</span></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-comment">// &#125;);</span></span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> value = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">const</span> <span class="hljs-title function_">handleChange</span> = (<span class="hljs-params">v: string</span>) =&gt; &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  value.<span class="hljs-property">value</span> = v;</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br></code></pre></td></tr></table></figure>

<p>在 main.ts 下，引入样式：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">import <span class="hljs-string">&quot;bytemd/dist/index.css&quot;</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://gitee.com/deng-2022/pictures/raw/master/images/image-20240201131855728.png" alt="image-20240201131855728"></p>
<h3 id="代码编辑器"><a href="#代码编辑器" class="headerlink" title="代码编辑器"></a>代码编辑器</h3><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1>
                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/memory_blog/categories/Ant-Design-Pro/" class="category-chain-item">Ant Design Pro</a>
  
  
    <span>></span>
    
  <a href="/memory_blog/categories/Ant-Design-Pro/Vue/" class="category-chain-item">Vue</a>
  
  
    <span>></span>
    
  <a href="/memory_blog/categories/Ant-Design-Pro/Vue/React/" class="category-chain-item">React</a>
  
  
    <span>></span>
    
  <a href="/memory_blog/categories/Ant-Design-Pro/Vue/React/%E9%A1%B9%E7%9B%AE/" class="category-chain-item">项目</a>
  
  
    <span>></span>
    
  <a href="/memory_blog/categories/Ant-Design-Pro/Vue/React/%E9%A1%B9%E7%9B%AE/%E7%BB%8F%E9%AA%8C/" class="category-chain-item">经验</a>
  
  

  

  

  

  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/memory_blog/tags/%E7%BB%8F%E9%AA%8C/">#经验</a>
      
        <a href="/memory_blog/tags/%E9%A1%B9%E7%9B%AE/">#项目</a>
      
        <a href="/memory_blog/tags/Ant-Design-Pro/">#Ant Design Pro</a>
      
        <a href="/memory_blog/tags/Vue/">#Vue</a>
      
        <a href="/memory_blog/tags/React/">#React</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>浴火重生：从挫败到成功，前端框架的疑难杂症解决之道</div>
      <div>https://test.atomgit.net/memory_blog/2023/07/21/浴火重生：从挫败到成功，前端框架的疑难杂症解决之道/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Memory</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年7月21日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2024年1月16日</div>
        </div>
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/memory_blog/2023/07/30/%E4%B8%80%E6%96%87%E6%90%9E%E5%AE%9A%E7%BD%91%E7%AB%99%E4%B8%8A%E7%BA%BF%EF%BC%9A%E4%BB%8E%E9%9B%B6%E5%88%B0%E4%B8%80%E7%9A%84%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/" title="一文搞定网站上线：从零到一的实战指南">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">一文搞定网站上线：从零到一的实战指南</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/memory_blog/2023/07/17/%E6%8E%A2%E7%B4%A2%E7%AE%97%E6%B3%95%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB%E4%B8%8E%E8%A7%A3%E9%A2%98%E6%80%9D%E8%B7%AF/" title="探索算法学习之旅：经验分享与解题思路">
                        <span class="hidden-mobile">探索算法学习之旅：经验分享与解题思路</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  
  
    <article id="comments">
      

    </article>
  


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>Memory | 个人文档站点</span> </a>
<i class="iconfont icon-love"></i> <a href="https://hexo.fluid-dev.com/docs/guide/" target="_blank" rel="nofollow noopener"> <span>配置指南 | Hexo Fluid 用户手册</span> </a>   
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="leancloud-site-pv-container" style="display: none">
        总访问量 
        <span id="leancloud-site-pv"></span>
         次
      </span>
    
    
      <span id="leancloud-site-uv-container" style="display: none">
        总访客数 
        <span id="leancloud-site-uv"></span>
         人
      </span>
    
    

  
</div>

  
  
    <!-- 备案信息 ICP for China -->
    <div class="beian">
  <span>
    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
      京ICP证123456号
    </a>
  </span>
  
    
      <span>
        <a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
          rel="nofollow noopener"
          class="beian-police"
          target="_blank"
        >
          
            <span style="visibility: hidden; width: 0">|</span>
            <img src="/memory_blog/img/police_beian.png" alt="police-icon"/>
          
          <span>京公网安备12345678号</span>
        </a>
      </span>
    
  
</div>

  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/memory_blog/js/events.js" ></script>
<script  src="/memory_blog/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>







  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/memory_blog/js/local-search.js" ></script>

  <script defer src="/memory_blog/js/leancloud.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/memory_blog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
